如何垂直alignment一个html单选button到它的标签？
我有一个单选button的标签在同一行的窗体。 然而单选button并不与它们的标签垂直alignment，如下面的屏幕截图所示。
我怎样才能将单选button与标签垂直alignment？
编辑：
这里是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; }
尝试这个：
input[type="radio"] { margin-top: -1px; vertical-align: middle; }
我知道我select了菜单devinda的饮料，但看着下面的意见，我同意并试图提出一个更好的解决scheme。 我设法想出了这个，在我看来这是一个更优雅的解决scheme：
input[type='radio'], label{ vertical-align: baseline; padding: 10px; margin: 10px; }
感谢所有提供答案的人，你的回答并没有被忽视。 如果你还有其他想法，可以自由添加你自己的答案。
尝试在CSS中添加vertical-align:top
label{ padding:5px; color:#222; font-family:corbel,sans-serif; font-size: 14px; margin: 10px; vertical-align:top; }
testing： http : //jsfiddle.net/muthkum/heAWP/
input { display: table-cell; vertical-align: middle }
把所有的电台上课。 这将适用于html页面上的所有单选button。
小提琴
你可以这样做：
input { vertical-align:middle; } label{ color:#222; font-family:corbel,sans-serif; font-size: 14px; }
DEMO
像这样的东西应该工作
CSS：
input { float: left; clear: left; width: 50px; line-height: 20px; } label { float: left; vertical-align: middle; }
label, input { vertical-align: middle; }
我只是将盒子的垂直中点与父盒子的基线加上父盒子的一半（en.wikipedia.org/wiki/X-height）alignment。
很多这些答案都说使用vertical-align: middle; ，这alignment了，但对我来说，它仍然是几个像素。 我用来获得真正的标签和无线电input之间的1alignment的方法是这样的， 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>
添加display:inline-block到标签，并给他们padding-top会解决这个问题，我想。 另外，只需在标签上设置line-height也是可以的。
虽然我同意表格不应该用于devise布局，与stream行的观点相反，他们通过validation。 即表标记不被弃用。 alignment单选button的最好方法是使用垂直alignment中间CSS，并在input元素上调整边距。
我喜欢把input放在标签里面（额外的好处是：现在你不需要标签上的for属性），并且在inputvertical-align: middlejoinvertical-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>
有几种方法，我宁愿是在HTML中使用一个表。 你可以添加两个coloum三行表，并放置单选button和标签。
<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>
