centrum przycisk radiowy poniżej etykiety

Question

Powiedzmy mam niektóre przyciski radiowe z ich wytwórni wygląda tak:

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

Jak mogę wyśrodkować każdą opcję poniżej odpowiedniej etykiety i ustawić ją poziomo?

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

Czy to działa? http://jsfiddle.net/fFEwh/2/

Answer 3

JSFIDDLE

Ta alternatywa nie używa div jako obwolut, używam tego, aby uzyskać krótkie drzewa 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>