Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

center radio button below label

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?

like image 558
user765368 Avatar asked Jun 06 '12 04:06

user765368


People also ask

How do you keep a radio button and label on the same line?

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.

Do radio buttons need labels?

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.

How do I select a radio button when a label is clicked?

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.


2 Answers

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

like image 24
ToddBFisher Avatar answered Oct 26 '22 10:10

ToddBFisher


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>
like image 89
Musa Avatar answered Oct 26 '22 10:10

Musa