将单选按钮与相应标签对齐

问题描述

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

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

它生成以下HTML。

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.

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

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.

我能够使用以下CSS在IE中做到这一点：

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>

但是，这在Firefox或Chrome浏览器中不起作用

However this doesn't work in Firefox or Chrome

有任何建议吗？

推荐答案

代替此：

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

尝试以下操作：

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

这篇关于将单选按钮与相应标签对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！