106

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

单选按钮。

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

编辑：

这是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;
}
4

13 回答 13

164

尝试这个：

input[type="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}
于 2013-02-07T22:22:34.440 回答
16

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

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

感谢所有提供答案的人，您的答案并没有被忽视。如果您仍然有任何其他想法，请随时为这个问题添加您自己的答案。

于 2012-11-22T13:52:55.430 回答
16 
input {
    display: table-cell;
    vertical-align: middle
}

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

小提琴

于 2012-11-22T10:05:14.050 回答
10

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

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

于 2018-02-23T19:53:30.637 回答
9

尝试添加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/

于 2012-11-22T10:02:38.180 回答
8

你可以这样做：

input {
    vertical-align:middle;
}

label{
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
}
于 2012-11-22T10:06:21.090 回答
2

我喜欢将输入放在标签内（额外的好处：现在您不需要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>

于 2017-06-19T13:14:03.170 回答
1 
label, input {
    vertical-align: middle;
}

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

于 2014-06-03T13:27:44.403 回答
1

像这样的东西应该工作

CSS：

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

label {
    float: left;
    vertical-align: middle;
}
于 2012-11-22T09:58:23.400 回答
1

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

于 2015-07-19T23:43:35.647 回答
1

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

于 2015-11-08T11:42:55.737 回答
-1

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

于 2012-11-22T09:53:12.093 回答
-2

有几种方法，我更喜欢使用 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>
于 2012-11-22T10:00:31.233 回答