Question

我有一个带有单选按钮的表单，它们与标签位于同一行。但是，单选按钮没有与标签垂直对齐，如下面的屏幕截图所示。

The radio buttons.

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

修改：

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

Answer 1

试试这个：

input[type="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}

Answer 2

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

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

感谢所有提供答案的人，你的回答并没有被忽视。如果您还有任何其他想法，请随意添加您自己的答案。

Answer 3

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

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

Fiddle

Answer 4

尝试将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/

Answer 5

你可以这样做：

input {
    vertical-align:middle;
}

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

的 DEMO

Answer 6

这样的事情应该有效

CSS：

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

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

Answer 7

label, input {
    vertical-align: middle;
}

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

Answer 8

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

Answer 9

我认为，

将display:inline-block添加到标签并为其提供padding-top会解决这个问题。此外，只需在标签上设置line-height。

Answer 10

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

Answer 11

我喜欢将输入放在标签内（添加了奖励：现在您不需要标签上的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属性添加到你的所有标签，并id添加到你的输入。我推荐这个选项用于多行文本内容较长的标签。

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

Answer 12

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

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

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

12 个答案: