centro pulsante di opzione sotto etichetta

Question

Diciamo ho alcuni pulsanti di opzione con le loro etichette simile a questo:

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

Come faccio a centrare ogni pulsante sotto la sua etichetta corrispondente e allinearla in orizzontale?

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

Questo lavoro dovrebbe funzionare? http://jsfiddle.net/fFEwh/2/

Answer 3

JSFIDDLE

Questa alternativa non usa div come involucri, io uso questo per ottenere una breve albero 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>