Align radio button with corresponding label

Question

I'm using ASP.NET radio button list control.

It generates the following HTML.

        <table>
            <tr>
                <td>
                    <input type="radio"/>
                    <label >
                        label 1</label>
                </td>
                <td>
                    <input  type="radio" 
                        value="False" checked="checked" />
                    <label >
                        label 2</label></td>                   
            </tr>
        </table>

Everything looks fine so far(at least to the user), labels are aligned with radio buttons.

However when I resize the font to say 10px, the size of the label obviously looks smaller but the side-effect of that is that the label also looks like it is aligned to the bottom of a radio button. I need a label to be alligned to middle of a radio button.

I was able to do this in IE with the following css:

  <style type="text/css">
    label
    {
        font-size:10px; 
        line-height:12px;
        vertical-align:middle;
    } 
</style>

However this doesn't work in Firefox or Chrome

Any suggestions?

See also: http://stackoverflow.com/questions/396439/radio-checkbox-alignment-in-html-css — Maxime Pacary, Oct 30 '12 at 10:29

Ron DeVera · Accepted Answer · 2011-11-26T04:18:43.787

32

Instead of this:

label {
  font-size: 10px;
  line-height: 12px;
  vertical-align: middle;
}

try this:

label, input[type="radio"] {
  font-size: 10px;
  vertical-align: middle;
}

edited Nov 26 '11 at 04:18

answered Mar 23 '09 at 18:30

Ron DeVera

14,394
6
41
36

Removed line-height from the replacement CSS. Glad it helped! – Ron DeVera Mar 23 '09 at 18:54

score 5 · Answer 2 · answered Mar 24 '09 at 10:15

That attribute selector won't work in IE6 - the most painless method I've found is to add a class of 'radio' to your radio buttons, so the CSS becomes:

label, input.radio{
  font-size:10px; 
  vertical-align:middle;
}

Of course, a table isn't the correct markup for that kind of form - personally I favour a definition list, with labels inside the DT and inputs in the DD. Semantically this is OK in my opinion - you're showing a list of terms (the labels) which the user needs to define (the inputs).

The markup would look like this:

<dl class="formStructure">
    <dt class="radio"><label for="option1">Yes</label></dt>
    <dd class="radio"><input type="radio" name="option" id="option1" value="yes"/></dd>

    <dt class="radio"><label for="option2">No</label></dt>
    <dd class="radio"><input type="radio" name="option" id="option2" value="no"/></dd>
</dl>

It really is bizarre how most frameworks produce forms in table elements. Semantically it makes absolutely no sense. A definition list is a little shaky... I personally use an ordered list, as it's a list of form fields and their corresponding labels, and the tabindex can align with the order of the list. Regardless, great point to bring up. — Steve Adams, Nov 26 '11 at 05:09

Align radio button with corresponding label

2 Answers2

Related