title: Align radio button with corresponding label
body: <p>I'm using ASP.NET radio button list control. </p>
  
  <p>It generates the following HTML. </p>
  
  <pre><code>        &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;input type="radio"/&gt;
                      &lt;label &gt;
                          label 1&lt;/label&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input  type="radio" 
                          value="False" checked="checked" /&gt;
                      &lt;label &gt;
                          label 2&lt;/label&gt;&lt;/td&gt;                   
              &lt;/tr&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p>Everything looks fine so far(at least to the user), labels are aligned with radio buttons. </p>
  
  <p>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. </p>
  
  <p>I was able to do this in IE with the following css:</p>
  
  <pre><code>  &lt;style type="text/css"&gt;
      label
      {
          font-size:10px; 
          line-height:12px;
          vertical-align:middle;
      } 
  &lt;/style&gt;
  </code></pre>
  
  <p>However this doesn't work in Firefox or Chrome</p>
  
  <p>Any suggestions?</p>