asp.net - 将单选按钮与相应的标签对齐

Question

我正在使用 ASP.NET 单选按钮列表控件。

它生成以下 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>

到目前为止一切看起来都很好(至少对用户而言)，标签与单选按钮对齐。

然而，当我将字体大小调整为 10px 时，标签的大小显然看起来更小，但其副作用是标签看起来也与单选按钮的底部对齐。我需要将标签对齐到单选按钮的中间。

我能够在 IE 中使用以下 css 执行此操作:

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

但这在 Firefox 或 Chrome 中不起作用

有什么建议吗？

Answer 1

取而代之的是:

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

试试这个:

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