单选按钮旁边的文本未垂直对齐

Question

你好，我试图在我的单选按钮旁边对齐垂直文本，但它崩溃了。

.radio {

  cursor: pointer;

  display: inline-flex;

}

.cui-a-radio-button__input {

  display: none;

}

.cui-a-radio-button__input:disabled  + .cui-a-radio-button-style {

  opacity: 0.3;

}

.cui-a-radio-button-style {

  border-radius: 50%;

  margin-right: 10px;

  box-sizing: border-box;

  padding: 2px;

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

}

<label for="Radio3" class="radio">

    <input type="radio" name="RadioField" id="Radio3" class="cui-a-radio-button__input" disabled>

    <div class="cui-a-radio-button-style">disabled</div>

</label>

我尝试将“vertical allign: top”添加到标签中，但 id 不起作用。我的结果是：

Answer 1

尝试在您的无线电课程中添加align-items:center ！

Answer 2

要在单选按钮旁边显示文本，只需将文本放置在标签内即可input。label标签有其他目的。&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="radio"&nbsp;disabled>&nbsp;disabled&nbsp;</input>