Skip to content Skip to sidebar Skip to footer
Home / Alignment / Css / Html / Radio Button

How To Align Radio Buttons Horizontally Below Labels

Post a Comment
So I am using the following HTML to display 4 radio buttons horizontally centered underneath their respective labels in a jsp: Copy 
<div id="radioGroup">
  <div class="wrap">
    <label for="markStudent">Mark User as Student</label>
    <input type="radio" name="mark" id="markStudent" value="Student" />
  </div>

  <div class="wrap">
    <label for="markAdmin">Mark User as Admin</label>
    <input type="radio" name="mark" id="markAdmin" value="Admin" />
  </div>
  <div class="wrap">
    <label for="markService">Mark User as Service</label>
    <input type="radio" name="mark" id="markService" value="Service" />
  </div>
  <div class="wrap">
    <label for="markNull">Mark User as Null</label>
    <input type="radio" name="mark" id="markNull" value="Null" />
  </div>
</div>

Note:

This is incorrect on two fronts:

.radioGroup label input[type="radio"] {
  display: block;
  margin: 0.5em auto;
}

Firstly, the element has an ID of radioGroup not class

Secondly, the input is not a child of the label but rather a sibling


Solution 2:

You can put the radio buttons inside the labels and change up the CSS just a bit.

.radioGroup label {
  display: inline-block;
  margin: 0 0.2em;
  text-align: center;
}
.radioGroup label input[type="radio"] {
  margin: 0.5em auto;
}
<div class="radioGroup">
        <label for="markStudent">Mark User as Student<br />
            <input type="radio" name="mark" id="markStudent" value="Student" />
        </label>
        <label for="markAdmin">Mark User as Admin<br />
            <input type="radio" name="mark" id="markAdmin" value="Admin" />
        </label>
        <label for="markService">Mark User as Service<br />
            <input type="radio" name="mark" id="markService" value="Service" />
        </label>
        <label for="markNull">Mark User as Null<br />
            <input type="radio" name="mark" id="markNull" value="Null" />
        </label>
    </div>

This ensures that the radio buttons will be horizontally centered directly under their respective labels.


Post a Comment for "How To Align Radio Buttons Horizontally Below Labels"