如何对齐单选按钮？

Question

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

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

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

在我的文件（本地主机和远程）中，代码是相同的，但使用任何 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>