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

Question

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

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

编辑:

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