如何對齊單選按鈕？

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>