如何将 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;
}

原文由 ninjacoder 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

试试下面的单选按钮样式

input {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

原文由 KileMax 发布，翻译遵循 CC BY-SA 4.0 许可协议