如何垂直对齐一个html单选按钮，它的标签？(How to vertically align a h

我有一个是在同一行作为自己的标签单选按钮的形式。 单选按钮然而不是垂直与其标签如下图所示的屏幕截图对准。

我怎么能垂直对齐与他们标签单选按钮？

编辑：

这里的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选择的前面回答，但是在看下面这我同意，并试图想出一个更好的解决办法的意见。 我设法想出了这一点，在我看来，这是一个更优雅的解决方案：

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

谢谢大家谁提供了一个答案，你的回答并没有被忽视。 如果您仍然有任何其他的想法随意你自己的答案添加到这个问题。

Answer 3:

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

把类的所有无线电。 这将在HTML页面中的所有单选按钮的工作。

小提琴

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:

还不如有点弯曲添加到答案。

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

Answer 7:

像这样的东西应该工作

CSS：

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

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

Answer 8:

label, input {
    vertical-align: middle;
}

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

Answer 9:

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

添加display:inline-block到标签，并给他们padding-top可以解决这个问题，我想。 此外，只需设置line-height的标签也会。

Answer 11:

虽然我同意表不应该被用于设计布局与普遍观点相反他们通过验证。 即table标签不会被弃用。 对齐单选按钮的最佳方法是使用具有对所述输入元件调整边缘垂直对齐中间CSS。

Answer 12:

我喜欢把标签内输入（额外的奖励：现在你不需要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 s到您的输入。 我会建议使用此选项与长文本内容，多行标签。

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

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

文章来源: How to vertically align a html radio button to it's label?