ラジオボタンのアラインメント方法は？

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整列されています。

私のファイル（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>