Center button below label

Question

Let's say I have a few radio buttons with their shortcuts that look like this:

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

How to center each switch below the corresponding label and align it horizontally?

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

Will this work? http://jsfiddle.net/fFEwh/2/

Answer 3

JSFIDDLE

This option does not use divs as wrappers, I use this to get a short DOM tree.

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