如何将 html 单选按钮与其标签垂直对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13509883/
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
How to vertically align a html radio button to it's label?
提问by ninjacoder
I have a form with radio buttons that are on the same line as their labels. The radio buttons are however not aligned vertically with their labels as shown in the screenshot below.
我有一个带有单选按钮的表单，它们与标签位于同一行。然而，单选按钮并未与其标签垂直对齐，如下面的屏幕截图所示。
How can I vertically align the radio buttons with their labels?
如何将单选按钮与其标签垂直对齐？
Edit:
编辑：
Here's the html code:
这是html代码：
<input checked="checked" type="radio" name="user_level" id="rd1" value="1"/>
<label for="rd1">radio 1</label><br/>
<input type="radio" name="user_level" id="rd2" value="2"/>
<label for="rd2">radio 2</label><br/>
<input type="radio" name="user_level" id="rd3" value="3"/>
<label for="rd3">radio 3</label><br/>
And the css code:
和 css 代码：
label{
padding:5px;
color:#222;
font-family:corbel,sans-serif;
font-size: 14px;
margin: 10px;
}
回答by zakangelle
Try this:
尝试这个：
input[type="radio"] {
margin-top: -1px;
vertical-align: middle;
}
回答by vusan
回答by ninjacoder
I know I'd selected the anwer by menuka devinda but looking at the comments below it I concurred and tried to come up with a better solution. I managed to come up with this and in my opinion it's a much more elegant solution:
我知道我选择了 menuka devinda 的答案，但查看下面的评论我同意并试图提出更好的解决方案。我设法想出了这个，在我看来，这是一个更优雅的解决方案：
input[type='radio'], label{
vertical-align: baseline;
padding: 10px;
margin: 10px;
}
Thanks to everyone who offered an answer, your answer didn't go unnoticed. If you still got any other ideas feel free to add your own answer to this question.
感谢所有提供答案的人，您的答案并未被忽视。如果您还有任何其他想法，请随时为这个问题添加您自己的答案。
回答by Muthu Kumaran
try adding vertical-align:topinto the css
尝试添加vertical-align:top到 css
label{
padding:5px;
color:#222;
font-family:corbel,sans-serif;
font-size: 14px;
margin: 10px;
vertical-align:top;
}?
回答by Dominic
Might as well add a bit of flex to the answers.
不妨为答案添加一点弹性。
.Radio {
display: inline-flex;
align-items: center;
}
.Radio--large {
font-size: 2rem;
}
.Radio-Input {
margin: 0 0.5rem 0;
}<div>
<label class="Radio" for="sex-female">
<input class="Radio-Input" type="radio" id="sex-female" name="sex" value="female" />
Female
</label>
<label class="Radio" for="sex-male">
<input class="Radio-Input" type="radio" id="sex-male" name="sex" value="male" />
Male
</label>
</div>
<div>
<label class="Radio Radio--large" for="sex-female2">
<input class="Radio-Input" type="radio" id="sex-female2" name="sex" value="female" />
Female
</label>
<label class="Radio Radio--large" for="sex-male2">
<input class="Radio-Input" type="radio" id="sex-male2" name="sex" value="male" />
Male
</label>
</div>回答by Shailender Arora
回答by Damien Overeem
Something like this should work
这样的事情应该工作
CSS:
CSS：
input {
float: left;
clear: left;
width: 50px;
line-height: 20px;
}
label {
float: left;
vertical-align: middle;
}
回答by Pavel Blagodov
label, input {
vertical-align: middle;
}
I'm just align the vertical midpoint of the boxes with the baseline of the parent box plus half the x-height (en.wikipedia.org/wiki/X-height) of the parent.
我只是将框的垂直中点与父框的基线加上父框的 x 高度 (en.wikipedia.org/wiki/X-height) 的一半对齐。
回答by JHS
A lot of these answers say to use vertical-align: middle;, which gets the alignment close but for me it is still off by a few pixels. The method that I used to get true 1 to 1 alignment between the labels and radio inputs is this, with vertical-align: top;:
很多这些答案都说要使用vertical-align: middle;，这使对齐接近，但对我来说它仍然相差几个像素。我用来在标签和无线电输入之间实现真正的 1 对 1 对齐的方法是这样的，使用vertical-align: top;：
label, label>input{
font-size: 20px;
display: inline-block;
margin: 0;
line-height: 28px;
height: 28px;
vertical-align: top;
}<h1>How are you?</h1>
<fieldset>
<legend>Your response:</legend>
<label for="radChoiceGood">
<input type="radio" id="radChoiceGood" name="radChoices" value="Good">Good
</label>
<label for="radChoiceExcellent">
<input type="radio" id="radChoiceExcellent" name="radChoices" value="Excellent">Excellent
</label>
<label for="radChoiceOk">
<input type="radio" id="radChoiceOk" name="radChoices" value="OK">OK
</label>
</fieldset>回答by PixelBlender
While I agree tables shouldn't be used for design layouts contrary to popular belief they do pass validation. i.e. the table tag is not deprecated. The best way to align radio buttons is using the vertical align middle CSS with margins adjusted on the input elements.
虽然我同意表格不应该用于设计布局，但与流行的看法相反，它们确实通过了验证。即不推荐使用 table 标记。对齐单选按钮的最佳方法是使用垂直对齐中间 CSS，并在输入元素上调整边距。
