如何将 html 单选按钮垂直对齐到它的标签？答案

【问题标题】：How to vertically align a html radio button to it's label?如何将 html 单选按钮垂直对齐到它的标签？
【发布时间】：2012-11-10 16:26:51
【问题描述】：

我有一个带有单选按钮的表单，这些单选按钮与其标签位于同一行。然而，单选按钮并未与其标签垂直对齐，如下面的屏幕截图所示。

如何将单选按钮与其标签垂直对齐？

编辑：

这是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/>

还有css代码：

label{
    padding:5px;
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
    margin: 10px;
}

【问题讨论】：

你的代码现在是什么样子的？
@ninjacoder 用代码更新你的问题。

标签： html css forms xhtml radio-button

【解决方案2】：

我知道我选择了 menuka devinda 的 anwer，但是看着它下面的 cmets，我同意并试图想出一个更好的解决方案。我设法想出了这个，在我看来这是一个更优雅的解决方案：

input[type='radio'], label{   
    vertical-align: baseline;
    padding: 10px;
    margin: 10px;
 }

感谢所有提供答案的人，您的回答没有被忽视。如果您还有其他想法，请随时添加您自己对此问题的答案。

【讨论】：

【解决方案3】：

input {
    display: table-cell;
    vertical-align: middle
}

为所有收音机上课。这将适用于 html 页面上的所有单选按钮。

Fiddle

【讨论】：

这是迄今为止我见过的最好的解决方案。直到现在，单选按钮标签对齐一直困扰着我多年。每次都对我有用。
请注意，当标签有多行文本时，这会中断。
您的 Fiddle 示例也将 padding: 0; margin: 0 应用于输入元素，并且似乎需要获得正确的对齐方式。

【解决方案4】：

不妨在答案中添加一些弹性。

.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>

【讨论】：

【解决方案5】：

尝试将vertical-align:top 添加到 css 中

label{
    padding:5px;
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
    margin: 10px;
    vertical-align:top;
}

测试：http://jsfiddle.net/muthkum/heAWP/

【讨论】：

当你增加或减少字体大小时，这不会成立。
@Protectorone 这是一个旧答案，特定于 OP 问题。如果您尝试对font-size 执行相同操作，请尝试使用display:flex。这是一个演示，jsfiddle.net/et8z47q5

【解决方案6】：

你可以这样做：

input {
    vertical-align:middle;
}

label{
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
}

【讨论】：

非常好。我想对齐按钮而不是标签，这样就可以了。

【解决方案7】：

我喜欢将输入放在标签内（额外的好处：现在您不需要标签上的for 属性），并将vertical-align: middle 放在输入上。

label > input[type=radio] {
    vertical-align: middle;
    margin-top: -2px;
}

#d2 {  
    font-size: 30px;
}

<div>
	<label><input type="radio" name="radio" value="1">Good</label>
	<label><input type="radio" name="radio" value="2">Excellent</label>
<div>
<br>
<div id="d2">
	<label><input type="radio" name="radio2" value="1">Good</label>
	<label><input type="radio" name="radio2" value="2">Excellent</label>
<div>

（-2px margin-top 是个人喜好问题。）

我真正喜欢的另一个选择是使用表格。（握住你的音叉！这真的很棒！）这确实意味着你需要将for 属性添加到所有标签中，并将ids 添加到你的输入中。对于包含多行长文本内容的标签，我建议使用此选项。

<table><tr><td>
    <input id="radioOption" name="radioOption" type="radio" />
    </td><td>
    <label for="radioOption">                     
        Really good option
    </label>
</td></tr></table>

【讨论】：

【解决方案8】：

这样的东西应该可以工作

CSS：

input {
    float: left;
    clear: left;
    width: 50px;
    line-height: 20px;
}

label {
    float: left;
    vertical-align: middle;
}

【讨论】：

【解决方案9】：

label, input {
    vertical-align: middle;
}

我只是将框的垂直中点与父框的基线加上父框的一半 x 高度 (en.wikipedia.org/wiki/X-height) 对齐。

【讨论】：

【解决方案10】：

很多这些答案都说使用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>

【讨论】：

【解决方案11】：

虽然我同意不应将表格用于设计布局，这与普遍认为的相反，但它们确实通过了验证。即不推荐使用 table 标签。对齐单选按钮的最佳方法是使用垂直对齐中间 CSS 并在输入元素上调整边距。

【讨论】：

【解决方案12】：

我认为，将display:inline-block 添加到标签并给它们padding-top 可以解决这个问题。此外，只需在标签上设置line-height 也可以。

【讨论】：

【解决方案13】：

有几种方法，我更喜欢在 html 中使用表格。您可以添加两个列三行表并放置单选按钮和标签。

<table border="0">

<tr>
  <td><input type="radio" name="sex" value="1"></td>
  <td>radio1</td>

</tr>
<tr>
  <td><input type="radio" name="sex" value="2"></td>
  <td>radio2</td>

</tr>
</table>

【讨论】：

请不要将表格用于布局目的。
-1 表格不应用于布局，并且此代码将无法通过验证...@ninjacoder，您为什么选择这个作为“答案”？
确实.. 说真的.. 每次有人教使用表格进行表单标记时，世界某处都会死去一只可爱的小猫..
@PeeHaa , tereško ,Damien Overeem 我认为你们可能是对的，我已经能够提出我自己的解决方案，我已经在下面发布了。多谢你们！非常感谢您的帮助和建议。
我尝试了其他选项，但效果并不好。表工作。 .tablecell{dispay:table-cell;} ... <div class="tablecell"> 对于那些不想承认他们正在使用表格的人来说似乎更像是一个不稳定的解决方法......