Vertical align checkbox label?

Question

I have checkboxes like this:

<label class="checkbox-label"><input type="checkbox" value="115">Administrators</label>

But I cannot fugure out how to style the label to be center valigned to the checkbox.

I tried adding vertical-align:middle;

Thanks

You'll probably need to use line-height or negative margins for your particular scenario. I'd provide an example, but you've given us no demo or CSS. — isherwood, Mar 05 '13 at 18:02

score 59 · Answer 1 · answered Mar 05 '13 at 18:12

59

This is what I did with your code.

html

<label class="checkbox-label"><input type="checkbox" value="115">-middle</label>

css

label.checkbox-label input[type=checkbox]{
    position: relative;
    vertical-align: middle;
    bottom: 1px;
}

answered Mar 05 '13 at 18:12

Artur K.

This is the correct answer since it doesn't alter the html syntax given by the OP. – Pavel Jul 10 '14 at 14:31
1

Except that it doesn't work. It brings it closer, but it's still not properly aligned. Adding vertical-align: text-bottom; to your CSS does though. – Brian Patterson Jan 18 '15 at 05:41
I like this answer better than the duplicated reference answer. Kudos! – RASMiranda Nov 27 '15 at 13:43

James Coyle · Answer 2 · 2013-03-05T18:09:47.827

5

Try using:

vertical-align: text-bottom;

jsFiddle

Edit:

 <input id="checkbox" type="checkbox" value="115">
 <label class="checkbox-label" for="checkbox">Administrators</label>

edited Mar 05 '13 at 18:09

answered Mar 05 '13 at 18:01

James Coyle

@user2043533 check the fiddle. It works for me. – James Coyle Mar 05 '13 at 18:03
Yes, that works, but with yours I cannot click the label to check the box. – user2043533 Mar 05 '13 at 18:07
You need to add `for="checkboxId"' to the label. See my edit. – James Coyle Mar 05 '13 at 18:09
Don't forget to accept the answer! – James Coyle Mar 05 '13 at 18:12
Doesn't work in my case. – Flash Thunder Jan 27 '14 at 09:58
This works, thanks! :) – Paladini Feb 12 '14 at 19:18
3

Your example does not work if you modify the text size. I set your fiddle to `font-size: 10px;`, and it failed to align the text with the input. – Adam J Sep 19 '14 at 12:46

score -2 · Answer 3 · answered Mar 05 '13 at 18:12

-2

Adjust the line height of the label.

answered Mar 05 '13 at 18:12

Honorable Chow