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?
As a quick solution either you can apply colspan for your td or You can have both the radio button controls in same td so that the change due to long text wont affect the display of radiobutton.
Radio button allows user to choose only one of the pre-defined options. Each radio button must be accompanied by a label describing the choice it represents. Another alternative is to provide an ID for each radio element and then use that ID in the for attribute of the label.
To select a radio button by clicking on its text in React:Add a label element for each radio button. The htmlFor prop of each label should be set to the id of each radio button. Click on the label element to select the radio button.
Would this work? http://jsfiddle.net/fFEwh/2/
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With