How To Align Radio Buttons Horizontally Below Labels

October 11, 2023 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

<divid="radioGroup"><divclass="wrap"><labelfor="markStudent">Mark User as Student</label><inputtype="radio"name="mark"id="markStudent"value="Student" /></div><divclass="wrap"><labelfor="markAdmin">Mark User as Admin</label><inputtype="radio"name="mark"id="markAdmin"value="Admin" /></div><divclass="wrap"><labelfor="markService">Mark User as Service</label><inputtype="radio"name="mark"id="markService"value="Service" /></div><divclass="wrap"><labelfor="markNull">Mark User as Null</label><inputtype="radio"name="mark"id="markNull"value="Null" /></div></div>

Note:

This is incorrect on two fronts:

.radioGrouplabelinput[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.

.radioGrouplabel {
  display: inline-block;
  margin: 00.2em;
  text-align: center;
}
.radioGrouplabelinput[type="radio"] {
  margin: 0.5em auto;
}

<divclass="radioGroup"><labelfor="markStudent">Mark User as Student<br /><inputtype="radio"name="mark"id="markStudent"value="Student" /></label><labelfor="markAdmin">Mark User as Admin<br /><inputtype="radio"name="mark"id="markAdmin"value="Admin" /></label><labelfor="markService">Mark User as Service<br /><inputtype="radio"name="mark"id="markService"value="Service" /></label><labelfor="markNull">Mark User as Null<br /><inputtype="radio"name="mark"id="markNull"value="Null" /></label></div>

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

Html5 Guru

How To Align Radio Buttons Horizontally Below Labels

Solution 2:

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