如何对齐单选按钮？

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的文本对齐。

在我的文件（本地主机和远程）中，代码是相同的，但是使用top - middle - bottom任何CSS选项都无法实现中间对齐。

Answer 1

您可以将输入包装在一个父元素中，然后使用display: flex和align-items: center在父元素上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>