如何垂直对齐 html 单选按钮的标签？

我有一个带有单选按钮的表单，这些按钮与它们的标签在同一行上。然而，单选按钮与其标签没有垂直对齐，如下面的截图所示。

The radio buttons.

如何使单选按钮与其标签垂直对齐？

编辑:

这是 html 代码:

<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/>

还有 CSS 代码:

label{
padding:5px;
color:#222;
font-family:corbel,sans-serif;
font-size: 14px;
margin: 10px;
}
208463 次浏览
小开

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.

小开

Something like this should work

CSS:

input {
float: left;
clear: left;
width: 50px;
line-height: 20px;
}


label {
float: left;
vertical-align: middle;
}
小开

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>
小开

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;
}​

Test: http://jsfiddle.net/muthkum/heAWP/

小开 
input {
display: table-cell;
vertical-align: middle
}

Put class for all radio. This will work for all radio button on the html page.

Fiddle

小开

You can do like this :

input {
vertical-align:middle;
}


label{
color:#222;
font-family:corbel,sans-serif;
font-size: 14px;
}
小开

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.

小开

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.

小开

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{
font-size: 20px;
display: inline-block;
margin: 0;
line-height: 28px;
height: 28px;
vertical-align: top;
}
<h1>How are you?</h1>
<fieldset>
<legend>Your response:</legend>
<label for="radChoiceGood">
<input type="radio" id="radChoiceGood" name="radChoices" value="Good">Good
</label>
	

<label for="radChoiceExcellent">
<input type="radio" id="radChoiceExcellent" name="radChoices" value="Excellent">Excellent
</label>
	

<label for="radChoiceOk">
<input type="radio" id="radChoiceOk" name="radChoices" value="OK">OK
</label>
</fieldset>

小开

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.

小开

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] {
vertical-align: middle;
margin-top: -2px;
}


#d2 {
font-size: 30px;
}
<div>
<label><input type="radio" name="radio" value="1">Good</label>
<label><input type="radio" name="radio" value="2">Excellent</label>
<div>
<br>
<div id="d2">
<label><input type="radio" name="radio2" value="1">Good</label>
<label><input type="radio" name="radio2" value="2">Excellent</label>
<div>

(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 ids to your inputs. I'd recommended this option for labels with long text content, over multiple lines.

<table><tr><td>
<input id="radioOption" name="radioOption" type="radio" />
</td><td>
<label for="radioOption">
Really good option
</label>
</td></tr></table>

小开

Might as well add a bit of flex to the answers.

.Radio {
display: inline-flex;
align-items: center;
}


.Radio--large {
font-size: 2em;
}


.Radio-Input {
margin: 0 0.5em 0;
}
<div>
<label class="Radio" for="sex-female">
<input class="Radio-Input" type="radio" id="sex-female" name="sex" value="female" />
Female
</label>


<label class="Radio" for="sex-male">
<input class="Radio-Input" type="radio" id="sex-male" name="sex" value="male" />
Male
</label>
</div>




<div>
<label class="Radio Radio--large" for="sex-female2">
<input class="Radio-Input" type="radio" id="sex-female2" name="sex" value="female" />
Female
</label>


<label class="Radio Radio--large" for="sex-male2">
<input class="Radio-Input" type="radio" id="sex-male2" name="sex" value="male" />
Male
</label>
</div>

小开

Try the below styling for the radio buttons

input {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}

提交答案