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?

Answer 1

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; }