标签旁边的中心单选按钮

Question

我试图将我的所有单选按钮与其标签垂直对齐，但vertical-align没有帮助：

input[type="radio"]{
    vertical-align: center;
}

<p style="display:inline-block;margin:0 0;"> Option: </p>
<label>
<input type="radio" name="group1"> Label1
</label>
<label>
<input type="radio" name="group1"> Label2
</label>
<label>
<input type="radio" name="group1"> Label3
</label>

Answer 1

正确的是：vertical-align：middle;

Answer 2

您可以使用以下CSS设置：

input[type="radio"] {
  display: block;
  margin: 0 auto 5px auto;
  
}
label {
  text-align: center;
  display: inline-block;
  width: 80px;
}

<p style="display:inline-block;margin:0 0;"> Option: </p>
<label>
<input type="radio" name="group1"> Label1
</label>
<label>
<input type="radio" name="group1"> Label2
</label>
<label>
<input type="radio" name="group1"> Label3
</label>

并适用于你的jsfiddle：https://jsfiddle.net/p5ts1rco/1/

Answer 3

[解决了]

我编辑此示例的复选框https://stackoverflow.com/a/494922/7767664（更改为单选按钮）：

.checkboxes label {
  display: block;
  float: left;
  padding-right: 3px;
  white-space: nowrap;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
  font-size:29px;
}

<div class="checkboxes">
    <label> <span>Option: </span></label>
    <label><input type="radio" name="group1" id="x" /> <span>Label text x</span></label>
    <label><input type="radio" name="group1" id="y" /> <span>Label text y</span></label>
    <label><input type="radio" name="group1" id="z" /> <span>Label text z</span></label>
</div>