center radio button below label
25,133
Solution 1
.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>
Solution 2
Would this work? http://jsfiddle.net/fFEwh/2/
Solution 3
This alternative does not use div 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>
Author by
user765368
Updated on July 21, 2022Comments
-
user765368 almost 2 years
Let's say I have some radio buttons with their labels looking like this:
<label for="my_radio_button_id">My Label</label> <input type="radio" name="radio" id="my_radio_button_id" />
How do I center each radio button below its corresponding label and align it horizontally?
-
user765368 almost 12 yearsYeah but if I have many, they are not horizontally aligned. How do I horizontally align these jsfiddle.net/fFEwh/1
-
ToddBFisher almost 12 yearsupdated, let me know if that is what you are trying to achieve
-
ToddBFisher almost 12 yearsExactly what I was thinking, the key is to wrap it up in a parent container such as a div and set proper display. +1up