标签下方的中心单选按钮答案

【问题标题】：center radio button below label标签下方的中心单选按钮
【发布时间】：2012-06-10 02:50:41
【问题描述】：

假设我有一些单选按钮，其标签如下所示：

<label for="my_radio_button_id">My Label</label>
<input type="radio" name="radio" id="my_radio_button_id" />

如何将每个单选按钮置于其相应标签下方并水平对齐？

【问题讨论】：

标签： html css radio-button

【解决方案1】：

FIDDLE

.checkboxgroup {
  display: inline-block;
  text-align: center;
}
.checkboxgroup label {
  display: block;
}

<div id="checkboxes">
  <div class="checkboxgroup">
    <label for="my_radio_button_id1">My Label1</label>
    <input type="radio" name="radio" id="my_radio_button_id1" />
  </div>
  <div class="checkboxgroup">
    <label for="my_radio_button_id2">My Label2</label>
    <input type="radio" name="radio" id="my_radio_button_id2" />
  </div>
  <div class="checkboxgroup">
    <label for="my_radio_button_id3">My Label3</label>
    <input type="radio" name="radio" id="my_radio_button_id3" />
  </div>
</div>

【讨论】：

正是我的想法，关键是将其包装在 div 等父容器中并设置正确的显示。 +1 向上

【解决方案2】：

这行得通吗？ http://jsfiddle.net/fFEwh/2/

【讨论】：

是的，但如果我有很多，它们不是水平对齐的。我如何水平对齐这些jsfiddle.net/fFEwh/1
已更新，让我知道您是否正在努力实现这一目标

【解决方案3】：

JSFIDDLE

这个替代方案不使用 div 作为包装器，我用它来获得一个短的 DOM 树。

/* center radio below label */

.radioGroupBelow label {
  display: inline-block;
  text-align: center;
  margin: 0 0.2em;
}
.radioGroupBelow label input[type="radio"] {
  display: block;
  margin: 0.5em auto;
}

<div class="radioGroupBelow">
  Fruits:

  <label for="fruit1">Orange
    <input type="radio" name="fruits" id="fruit1">
  </label>

  <label for="fruit2">Apple
    <input type="radio" name="fruits" id="fruit2">
  </label>

  <label for="fruit3">Grape
    <input type="radio" name="fruits" id="fruit3">
  </label>

  <label for="fruit4">Lemon
    <input type="radio" name="fruits" id="fruit4">
  </label>
</div>

【讨论】：