Вопрос по css, css3, html – центральная кнопка под меткой

8

Допустим, у меня есть несколько переключателей с ярлыками, которые выглядят так:

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

Как расположить каждую радио-кнопку под соответствующей меткой и выровнять ее по горизонтали?

Ваш Ответ

3   ответа
25

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>

Error: User Rate Limit Exceeded
1

JSFIDDLE

preview

Эта альтернатива не использует 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>

2
Error: User Rate Limit Exceededjsfiddle.net/fFEwh/1 user765368
Error: User Rate Limit Exceeded user765368
Error: User Rate Limit Exceeded

Похожие вопросы