Vertically centering checkboxes/radio buttons with their labels (bootstrap)

Benjamin Hall

So I have some radio buttons and check boxes (using bootstrap). I'm finding that the inputs are about 4 pixels higher than the text of the labels and it's driving me crazy. Help? I'm sure it's something stupid, but I'm not finding it and nothing I've tried to do on the CSS side has made any difference at all.

JsFiddle: https://jsfiddle.net/g6x2n30z/

Code: (part of a much larger page)

<div class="form-group form-horizontal">
    <div class='form-check'>
        <input type="radio" class="form-check-input" name="answer-entry" value="0"/>
        <span>0 asdfasdfasdfas asdf asdf asdf asd fasd fasd fasd fasd</span>
    </div>
</div>

Picture:

RaceProUK

@benjamin-hall My advice for vertically centring with HTML and CSS: Don't even try. In most situations, it's nigh-on impossible. The only place you can get reliable vertical alignments is inside table cells, so you could in theory use tables to lay out the radio/checkbox and its label. Just know that if you do, you will quite rightly earn ridicule from now until the day you die :P

Benjamin Hall

@raceprouk BUT MY OCD!!!!!!!!1

Gulp. Yes, tables would be worse. I still have nightmares of a particular work site that is nested tables (with one <td> element each, containing the next table) about 6 layers deep. <begins shaking with barely repressed PTSD>

The_Quiet_One

Try something like this:

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.form-check > * {
  display: inline-block;
  vertical-align: middle;
  height: 15px;
}

vertical-align is a shitty CSS property, since it does distinctly different things depending on the "display" property of the element. For table-cell elements, it vertically aligns its contents. For inline-block elements, they vertically align themselves compared to its siblings. For everything else, vertical-align either does jack shit or doesn't do what you want it to. This would only work for single-line, though. I'd have to think about something more robust.

Benjamin Hall

@the_quiet_one Thanks. That seems to work most of the way. I'd not even considered vertical-align since I've never seen it work right before.

RaceProUK

@the_quiet_one Huh... TIL

Tsaukpaetra

@benjamin-hall said in Vertically centering checkboxes/radio buttons with their labels (bootstrap):

nothing I've tried to do on the CSS side

Have you tried CSS-ing it out entirely? I once found a snipped that replaced the radio button itself with an image (using only ten or so lines even!). Then you can definitely control the vertical alignment.

Benjamin Hall

@tsaukpaetra I need something that's visibly a radio button and has the correct behavior. This is part of an online homework/quiz system and teenagers are not known for seeing beyond the obvious. If it doesn't work exactly like they expect it to, they whine and/or give up.

Tsaukpaetra

@benjamin-hall said in Vertically centering checkboxes/radio buttons with their labels (bootstrap):

something that's visibly a radio button and has the correct behavior.

Then use an image of a radio button. It does the same thing exactly, just uses a (set of) image.

Edit: For an example, I have a site that uses it:

BABSCon Votes!

Obviously customized.

Benjamin Hall

@tsaukpaetra said in Vertically centering checkboxes/radio buttons with their labels (bootstrap):

@benjamin-hall said in Vertically centering checkboxes/radio buttons with their labels (bootstrap):

something that's visibly a radio button and has the correct behavior.

Then use an image of a radio button. It does the same thing exactly, just uses a (set of) image.

Soo not worth the effort, especially since I'd have to do checkboxes as well and include all those images in my zipped download. I'll deal with a pixel of odd alignment before I do that. Thanks though.

Tsaukpaetra

@benjamin-hall said in Vertically centering checkboxes/radio buttons with their labels (bootstrap):

all those images

Man, I heard of bit-pinchers, but scurrying away from four (max!) images of maybe 200 bytes each takes the cake!

Benjamin Hall

@tsaukpaetra It's the effort involved in making images that look good, look consistent with the system defaults across platforms (including mobile and especially mobile safari) and testing it. All just to adjust the vertical position by a few pixels. Likely no one but me will ever notice it.