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

Answer 2

我知道我已经选择了menuka devinda的anwer,但是看看下面的评论,我同意并尝试提出更好的解决方案.我设法想出了这个,在我看来这是一个更优雅的解决方案:

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

可能还会给答案增加一些弹性。

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

你可以这样做:

input {
    vertical-align:middle;
}

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

DEMO

Answer 7

我认为添加display:inline-block标签并给予它们padding-top可以解决这个问题。line-height另外，只需在标签上设置也可以。