Css – Align radio button with corresponding label


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

It generates the following HTML.

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

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">

However this doesn't work in Firefox or Chrome

Any suggestions?

Best Solution

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;