单选按钮和相关标签未对齐

Question

单选按钮的显示方式与附加图像一样。如何对齐标签和按钮。

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

我有两种解决方案，但我认为其中一种更好：

1. 首先不要将您的 <input> 包裹在 <label> 中，而是这样做：

   {标签}

2. 然后对于 css :

   .label-container { 显示：弹性； 对齐项目：居中； }

   输入[type='radio'] { 保证金：自动； }

您可以使用 display flex 和 align-items: center 为每个标签使用您自己的代码 但我觉得它一点也不干净。