如何对齐单选按钮？

Question

＆＃13;

＆＃13;

#radio1,
#radio2 {
  vertical-align: middle;
}

＆＃13;

<input type="radio" name="konk" id='radio1' value="abc">Dady
<input type="radio" name="konk" id='radio2' value="abc">Oliva

＆＃13;

＆＃13;

＆＃13;

我尝试使用jsfiddle并使用vertical-align:top - 按钮与文本完全middle对齐。

在我的文件（localhost和remote）中，代码是相同的，但使用任何css选项top - middle - bottom都无法获得中间对齐。

Answer 1

您可以将输入包装在一个父元素中，然后在父元素上使用display: flex和align-items: center，也可以从输入中删除边距。

.wrap {
  display: flex;
  align-items: center;
}
input {
  margin: 0;
}

<div class="wrap">
  <input type="radio" name="konk" id='radio1' value="abc">Dady
  <input type="radio" name="konk" id='radio2' value="abc">Oliva
</div>