CSS 将单选按钮与相应的标签对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/674643/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align radio button with corresponding label
提问by dev.e.loper
I'm using ASP.NET radio button list control.
我正在使用 ASP.NET 单选按钮列表控件。
It generates the following HTML.
它生成以下 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.
但是，当我将字体大小调整为 10px 时，标签的大小显然看起来更小，但副作用是标签看起来也与单选按钮的底部对齐。我需要一个标签与单选按钮的中间对齐。
I was able to do this in IE with the following css:
我能够在 IE 中使用以下 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
但是这在 Firefox 或 Chrome 中不起作用
Any suggestions?
有什么建议？
回答by Ron DeVera
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;
}
回答by Ben Hull
That attribute selector won't work in IE6 - the most painless method I've found is to add a class of 'radio' to your radio buttons, so the CSS becomes:
该属性选择器在 IE6 中不起作用 - 我发现的最轻松的方法是向单选按钮添加一类“radio”，因此 CSS 变为：
label, input.radio{
font-size:10px;
vertical-align:middle;
}
Of course, a table isn't the correct markup for that kind of form - personally I favour a definition list, with labels inside the DT and inputs in the DD. Semantically this is OK in my opinion - you're showing a list of terms (the labels) which the user needs to define (the inputs).
当然，表格不是这种形式的正确标记——我个人更喜欢定义列表，在 DT 中带有标签，在 DD 中带有输入。在我看来，这在语义上是可以的 - 您正在显示用户需要定义（输入）的术语（标签）列表。
The markup would look like this:
标记如下所示：
<dl class="formStructure">
<dt class="radio"><label for="option1">Yes</label></dt>
<dd class="radio"><input type="radio" name="option" id="option1" value="yes"/></dd>
<dt class="radio"><label for="option2">No</label></dt>
<dd class="radio"><input type="radio" name="option" id="option2" value="no"/></dd>
</dl>
