botón central debajo de la etiqueta

Question

Digamos que tengo algunos botones de radio con sus etiquetas con este aspecto:

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

¿Cómo centrar cada botón de radio debajo de su etiqueta correspondiente y se alinean horizontalmente?

Answer 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>

Answer 2

¿Funcionaría? http://jsfiddle.net/fFEwh/2/

Answer 3

JSFIDDLE

Esta alternativa no utiliza div como envolturas, utilizo esto para conseguir un árbol DOM corto.

/* 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>