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

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

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

编辑：

以下是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/>

---

我认为，在标签中添加

display:inline block

，并在顶部填充

可以解决这个问题。另外，只需在标签上设置
行高度也可以。
类似的方法应该可以

CSS:

有几种方法，我更喜欢使用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
无线电2
尝试将
垂直对齐：top
添加到css中

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

测试：

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

您可以这样做：

input {
    vertical-align:middle;
}

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

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

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

感谢所有提供答案的人，你的答案并没有被忽视。如果您还有其他想法，请随意添加您自己的答案。
尝试以下方法：

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

我只是将框的垂直中点与父框的基线加上父框x高度的一半（en.wikipedia.org/wiki/x-height）对齐
 很多答案说使用
垂直对齐：中间，这使对齐很近，但对我来说，它仍然偏离了几个像素。我用来在标签和无线电输入之间实现1对1对齐的方法是这样的，
verticalalign:top：


标签，标签>输入{
字体大小：20px；
显示：内联块；
保证金：0；
线高：28px；
高度：28px；
垂直对齐：顶部；
}
你好吗？
你的答复：
好
杰出的
好啊
虽然我同意表格不应用于设计布局，但这与人们普遍认为它们确实通过了验证的观点相反。i、 e.表标记未被弃用。对齐单选按钮的最佳方法是使用垂直对齐中间CSS，并在输入元素上调整边距。
我喜欢将输入放在标签内（额外的好处：现在您不需要标签上的
for
属性），并将
垂直对齐：中间
放在输入上


label>input[type=radio]{
垂直对齐：中间对齐；
页边顶部：-2px；
}
#d2{
字体大小：30px；
}

好
杰出的


好
杰出的
不妨给答案增加一点弹性


收音机{
显示：内联flex；
对齐项目：居中；
}
.收音机--大的{
字号：2rem；
}
.无线电输入{
保证金：0.5雷姆0；
}

女性
男性
女性
男性
您的代码目前是什么样子？@ninjacoder用代码更新您的问题。请不要将表格用于布局。-1表格不应用于布局，此代码将无法通过验证@忍者魔法师，你为什么选择这个作为“答案”？真的。。认真地每当有人教我们使用表格进行表单标记时，一只可爱的小猫就会在世界的某个地方死去。@PeeHaa，tereško，Damien Overeem我想你们可能是对的，我已经想出了我自己的解决方案，我在下面发布了。谢谢大家！非常感谢你的帮助和建议。我尝试过其他的选择，但效果不太好。桌子工作<代码>.tablecell{dispay:tablecell；}似乎更像是一个不可靠的解决办法……这对我来说很有效，但我不得不添加一个
身高=100%
因为我的父元素没有显式设置高度。这似乎给了我Mac、Windows和Linux之间最一致的方法，使用Chrome、Firefox或IE。此外，我注意到如果我在标签上加上填充物并将收音机放在标签内，那么我可能需要将边距顶部设置为小于-1px（如-3px）的值根据我在标签上使用了多少填充物。（我喜欢给我的单选框标签一个悬停颜色和圆形边框效果，让它们看起来更酷。）解释为什么这是唯一正确的答案：HTML中的一些元素有默认的边距或填充值，比如或
元素或单选按钮。如果进入开发者模式（F12）并将鼠标悬停在标记上，您可以看到这一点。实际上，这是一个好的行为，因为浏览器本身使用CSS定位预定义的元素，然后用户可以重置这些元素。但是如果你不知道为什么一开始有些东西是不对齐的，这可能会让人困惑。所以，如果默认情况下看起来很奇怪，请始终尝试覆盖您未设置的设置。当您增大或减小字体大小时，这似乎不起作用。不过，请用一个有效的例子来证明我错了！当您增大或减小字体大小时，这不起作用。@Protectorone这是一个旧答案，特定于OP问题。如果您正尝试使用
字体大小
执行相同操作，请尝试使用
显示：flex
。这是一个演示，这是迄今为止我见过的最好的解决方案。单选按钮标签对齐一直困扰着我多年，直到现在。每次对我都有效。请注意，当标签有多行文本时，这会中断。您的小提琴示例也适用于
填充：0；边距：0
到输入元素，似乎需要它才能获得正确的对齐方式。非常好。我想对齐按钮而不是标签，这样就可以了。
input {
    vertical-align:middle;
}

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

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

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

label, input {
    vertical-align: middle;
}