单选按钮和关联的 Label 未对齐

Question

Radio buttons are showing like the attached image. How to align the Label and the button.

 input[type="radio"] { width: 18px; min-width: auto; display: inline-block; }

 <label><input type="radio" name="myRadios1" id="myRadios1" value="Yes" ONCLICK="show_info_block(this.value)" />Yes</label> <label><input type="radio" name="myRadios2" id="myRadios2" value="No" ONCLICK="show_info_block(this.value)" />No</label>

Answer 1

I have 2 solutions but i think one of them is better:

1. first Dont wrap you <input> in <label> and do this instead:

   {label}

2. then for css:

   .label-container { display: flex; align-items: center; }

   input[type='radio'] { margin: auto; }

you can use display flex and align-items: center for each label with your own code but I think it's not clean at all.