I have a form with radio buttons that are on the same line as their labels. The radio buttons are however not aligned vertically with their labels as shown in the screenshot below.
How can I vertically align the radio buttons with their labels?
Edit:
Here's the html code:
<input checked="checked" type="radio" name="user_level" id="rd1" value="1"/>
<label for="rd1">radio 1</label><br/>
<input type="radio" name="user_level" id="rd2" value="2"/>
<label for="rd2">radio 2</label><br/>
<input type="radio" name="user_level" id="rd3" value="3"/>
<label for="rd3">radio 3</label><br/>
And the css code:
label{
padding:5px;
color:#222;
font-family:corbel,sans-serif;
font-size: 14px;
margin: 10px;
}
This question is related to
html
css
forms
xhtml
radio-button
try adding vertical-align:top
into the css
label{
padding:5px;
color:#222;
font-family:corbel,sans-serif;
font-size: 14px;
margin: 10px;
vertical-align:top;
}?
A lot of these answers say to use vertical-align: middle;
, which gets the alignment close but for me it is still off by a few pixels. The method that I used to get true 1 to 1 alignment between the labels and radio inputs is this, with vertical-align: top;
:
label, label>input{_x000D_
font-size: 20px;_x000D_
display: inline-block;_x000D_
margin: 0;_x000D_
line-height: 28px;_x000D_
height: 28px;_x000D_
vertical-align: top;_x000D_
}
_x000D_
<h1>How are you?</h1>_x000D_
<fieldset>_x000D_
<legend>Your response:</legend>_x000D_
<label for="radChoiceGood">_x000D_
<input type="radio" id="radChoiceGood" name="radChoices" value="Good">Good_x000D_
</label>_x000D_
_x000D_
<label for="radChoiceExcellent">_x000D_
<input type="radio" id="radChoiceExcellent" name="radChoices" value="Excellent">Excellent_x000D_
</label>_x000D_
_x000D_
<label for="radChoiceOk">_x000D_
<input type="radio" id="radChoiceOk" name="radChoices" value="OK">OK_x000D_
</label>_x000D_
</fieldset>
_x000D_
Try this:
input[type="radio"] {
margin-top: -1px;
vertical-align: middle;
}
label, input {
vertical-align: middle;
}
I'm just align the vertical midpoint of the boxes with the baseline of the parent box plus half the x-height (en.wikipedia.org/wiki/X-height) of the parent.
I like putting the inputs inside the labels (added bonus: now you don't need the for
attribute on the label), and put vertical-align: middle
on the input.
label > input[type=radio] {_x000D_
vertical-align: middle;_x000D_
margin-top: -2px;_x000D_
}_x000D_
_x000D_
#d2 { _x000D_
font-size: 30px;_x000D_
}
_x000D_
<div>_x000D_
<label><input type="radio" name="radio" value="1">Good</label>_x000D_
<label><input type="radio" name="radio" value="2">Excellent</label>_x000D_
<div>_x000D_
<br>_x000D_
<div id="d2">_x000D_
<label><input type="radio" name="radio2" value="1">Good</label>_x000D_
<label><input type="radio" name="radio2" value="2">Excellent</label>_x000D_
<div>
_x000D_
(The -2px margin-top
is a matter of taste.)
Another option I really like is using a table. (Hold your pitch forks! It's really nice!) It does mean you need to add the for
attribute to all your labels and id
s to your inputs. I'd recommended this option for labels with long text content, over multiple lines.
<table><tr><td>_x000D_
<input id="radioOption" name="radioOption" type="radio" />_x000D_
</td><td>_x000D_
<label for="radioOption"> _x000D_
Really good option_x000D_
</label>_x000D_
</td></tr></table>
_x000D_
I know I'd selected the anwer by menuka devinda but looking at the comments below it I concurred and tried to come up with a better solution. I managed to come up with this and in my opinion it's a much more elegant solution:
input[type='radio'], label{
vertical-align: baseline;
padding: 10px;
margin: 10px;
}
Thanks to everyone who offered an answer, your answer didn't go unnoticed. If you still got any other ideas feel free to add your own answer to this question.
there are several way, one i would prefer is using a table in html. you can add two coloum three rows table and place the radio buttons and lable.
<table border="0">
<tr>
<td><input type="radio" name="sex" value="1"></td>
<td>radio1</td>
</tr>
<tr>
<td><input type="radio" name="sex" value="2"></td>
<td>radio2</td>
</tr>
</table>
Adding display:inline-block
to the labels and giving them padding-top
would fix this, I think. Also, just setting the line-height
on the labels would also.
Might as well add a bit of flex to the answers.
.Radio {_x000D_
display: inline-flex;_x000D_
align-items: center;_x000D_
}_x000D_
_x000D_
.Radio--large {_x000D_
font-size: 2rem;_x000D_
}_x000D_
_x000D_
.Radio-Input {_x000D_
margin: 0 0.5rem 0;_x000D_
}
_x000D_
<div>_x000D_
<label class="Radio" for="sex-female">_x000D_
<input class="Radio-Input" type="radio" id="sex-female" name="sex" value="female" />_x000D_
Female_x000D_
</label>_x000D_
_x000D_
<label class="Radio" for="sex-male">_x000D_
<input class="Radio-Input" type="radio" id="sex-male" name="sex" value="male" />_x000D_
Male_x000D_
</label>_x000D_
</div>_x000D_
_x000D_
_x000D_
<div>_x000D_
<label class="Radio Radio--large" for="sex-female2">_x000D_
<input class="Radio-Input" type="radio" id="sex-female2" name="sex" value="female" />_x000D_
Female_x000D_
</label>_x000D_
_x000D_
<label class="Radio Radio--large" for="sex-male2">_x000D_
<input class="Radio-Input" type="radio" id="sex-male2" name="sex" value="male" />_x000D_
Male_x000D_
</label>_x000D_
</div>
_x000D_
While I agree tables shouldn't be used for design layouts contrary to popular belief they do pass validation. i.e. the table tag is not deprecated. The best way to align radio buttons is using the vertical align middle CSS with margins adjusted on the input elements.
You can do like this :
input {
vertical-align:middle;
}
label{
color:#222;
font-family:corbel,sans-serif;
font-size: 14px;
}
input {
display: table-cell;
vertical-align: middle
}
Put class for all radio. This will work for all radio button on the html page.
Something like this should work
CSS:
input {
float: left;
clear: left;
width: 50px;
line-height: 20px;
}
label {
float: left;
vertical-align: middle;
}
Source: Stackoverflow.com