blocks|key|3056167|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3056168|input[type="radio"]+{
++margin-top:+-1px;
++vertical-align:+middle;
}|code-block|syntax|javascript|3056169|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this:</p>

<pre><code>input[type="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}
</code></pre>


blocks|key|2843108|text|input+{
++++display:+table-cell;
++++vertical-align:+middle
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2843109|把类放到所有的无线电上。这将适用于html页面上的所有单选按钮。|unstyled|2843110|Fiddle|offset|length|2843111|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/vusan/J5Tvn/^0|0|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|F|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<pre><code>input {
    display: table-cell;
    vertical-align: middle
}
</code></pre>

<p>Put class for all radio. This will work for all radio button on the html page. </p>

<p><a href="http://jsfiddle.net/vusan/J5Tvn/" rel="noreferrer">Fiddle</a></p>


blocks|key|208659|text|我知道我选择了menuka+devinda的anwer，但看着下面的评论，我同意并试图提出一个更好的解决方案。我设法想出了这个，在我看来，这是一个更优雅的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|208660|input[type='radio'],+label{+++
++++vertical-align:+baseline;
++++padding:+10px;
++++margin:+10px;
+}|code-block|syntax|javascript|208661|感谢每一个提供答案的人，你的答案不会被忽视。如果你还有其他的想法，请在这个问题上添加你自己的答案。|208662|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

<pre><code>input[type='radio'], label{   
    vertical-align: baseline;
    padding: 10px;
    margin: 10px;
 }
</code></pre>

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


blocks|key|2843313|text|不妨在答案中加入一点灵活性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2843314|​|2843315|.Radio+{
++display:+inline-flex;
++align-items:+center;
}

.Radio--large+{
++font-size:+2rem;
}

.Radio-Input+{
++margin:+0+0.5rem+0;
}|code-block|syntax|javascript|2843316|<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>|2843317|2843318|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Might as well add a bit of flex to the answers.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.Radio {
  display: inline-flex;
  align-items: center;
}

.Radio--large {
  font-size: 2rem;
}

.Radio-Input {
  margin: 0 0.5rem 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;label class="Radio" for="sex-female"&gt;
    &lt;input class="Radio-Input" type="radio" id="sex-female" name="sex" value="female" /&gt;
    Female
  &lt;/label&gt;

  &lt;label class="Radio" for="sex-male"&gt;
    &lt;input class="Radio-Input" type="radio" id="sex-male" name="sex" value="male" /&gt;
    Male
  &lt;/label&gt;
&lt;/div&gt;


&lt;div&gt;
  &lt;label class="Radio Radio--large" for="sex-female2"&gt;
    &lt;input class="Radio-Input" type="radio" id="sex-female2" name="sex" value="female" /&gt;
    Female
  &lt;/label&gt;

  &lt;label class="Radio Radio--large" for="sex-male2"&gt;
    &lt;input class="Radio-Input" type="radio" id="sex-male2" name="sex" value="male" /&gt;
    Male
  &lt;/label&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2843079|text|尝试将vertical-align:top添加到css|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2843080|label{
++++padding:5px;
++++color:#222;
++++font-family:corbel,sans-serif;
++++font-size:+14px;
++++margin:+10px;
++++vertical-align:top;
}​|code-block|syntax|javascript|2843081|测试：http://jsfiddle.net/muthkum/heAWP/|2843082|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/muthkum/heAWP/^0|3|I|0|0|3|Y|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>try adding <code>vertical-align:top</code> into the css</p>

<pre><code>label{
    padding:5px;
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
    margin: 10px;
    vertical-align:top;
}​
</code></pre>

<p>Test: <a href="http://jsfiddle.net/muthkum/heAWP/">http://jsfiddle.net/muthkum/heAWP/</a></p>


blocks|key|207085|text|你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|207086|input+{
++++vertical-align:middle;
}

label{
++++color:#222;
++++font-family:corbel,sans-serif;
++++font-size:+14px;
}|code-block|syntax|javascript|207087|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can do like this :</p>
<pre><code>input {
    vertical-align:middle;
}

label{
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
}
</code></pre>


blocks|key|3056315|text|我喜欢将输入放在标签内(额外的好处:现在您不需要标签上的for属性)，并将vertical-align:+middle放在输入上。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3056316|​|3056317|label+>+input[type=radio]+{
++++vertical-align:+middle;
++++margin-top:+-2px;
}

#d2+{++
++++font-size:+30px;
}|code-block|syntax|javascript|3056318|<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>|3056319|3056320|(+-2px+margin-top是一个品味问题。)|3056321|我真的喜欢的另一个选择是用桌子。(拿着你的音叉！它真的很棒！)这意味着您需要将for属性添加到所有标签，并将id添加到输入。我曾建议将此选项用于包含多行长文本内容的标签。|3056322|3056323|<table><tr><td>
++++<input+id="radioOption"+name="radioOption"+type="radio"+/>
++++</td><td>
++++<label+for="radioOption">+++++++++++++++++++++
++++++++Really+good+option
++++</label>
</td></tr></table>|3056324|3056325|entityMap^0|S|3|11|M|0|0|0|0|0|2|F|0|13|3|1I|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|R|3|S|5|6|7|1B|8|@$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|T|3|G|5|6|7|1G|8|@]|D|@]|E|$]]|$1|U|3|V|5|J|7|1H|8|@]|D|@]|E|$K|L]]|$1|W|3|G|5|6|7|1I|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|Y|$]]

<p>I like putting the inputs inside the labels (added bonus: now you don't need the <code>for</code> attribute on the label), and put <code>vertical-align: middle</code> on the input.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>label &gt; input[type=radio] {
    vertical-align: middle;
    margin-top: -2px;
}

#d2 {  
    font-size: 30px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
	&lt;label&gt;&lt;input type="radio" name="radio" value="1"&gt;Good&lt;/label&gt;
	&lt;label&gt;&lt;input type="radio" name="radio" value="2"&gt;Excellent&lt;/label&gt;
&lt;div&gt;
&lt;br&gt;
&lt;div id="d2"&gt;
	&lt;label&gt;&lt;input type="radio" name="radio2" value="1"&gt;Good&lt;/label&gt;
	&lt;label&gt;&lt;input type="radio" name="radio2" value="2"&gt;Excellent&lt;/label&gt;
&lt;div&gt;</code></pre>
</div>
</div>
</p>

<p>(The <code>-2px margin-top</code> is a matter of taste.)</p>

<p>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 <code>for</code> attribute to all your labels and <code>id</code>s to your inputs. I'd recommended this option for labels with long text content, over multiple lines.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;&lt;tr&gt;&lt;td&gt;
    &lt;input id="radioOption" name="radioOption" type="radio" /&gt;
    &lt;/td&gt;&lt;td&gt;
    &lt;label for="radioOption"&gt;                     
        Really good option
    &lt;/label&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2843024|text|像这样的东西应该是可行的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2843025|CSS：|2843026|input+{
++++float:+left;
++++clear:+left;
++++width:+50px;
++++line-height:+20px;
}

label+{
++++float:+left;
++++vertical-align:+middle;
}|code-block|syntax|javascript|2843027|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Something like this should work</p>

<p>CSS:</p>

<pre><code>input {
    float: left;
    clear: left;
    width: 50px;
    line-height: 20px;
}

label {
    float: left;
    vertical-align: middle;
}
</code></pre>


blocks|key|206654|text|label,+input+{
++++vertical-align:+middle;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|206655|我只是将框的垂直中点与父框的基线加上父框的x高度(en.wikipedia.org/wiki/+x-height+)的一半对齐。|unstyled|206656|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>label, input {
    vertical-align: middle;
}
</code></pre>

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


blocks|key|2843232|text|很多人的回答是使用vertical-align:+middle;，它可以使对齐更接近，但对我来说，它仍然偏离了几个像素。我用来在标签和单选输入之间获得真正的一对一对齐的方法是这样的，使用vertical-align:+top;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2843233|​|2843234|label,+label>input{
++++font-size:+20px;
++++display:+inline-block;
++++margin:+0;
++++line-height:+28px;
++++height:+28px;
++++vertical-align:+top;
}|code-block|syntax|javascript|2843235|<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>|2843236|2843237|entityMap^0|9|N|2L|K|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|Q|$]]

<p>A lot of these answers say to use <code>vertical-align: middle;</code>, 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 <code>vertical-align: top;</code>:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>label, label&gt;input{
    font-size: 20px;
    display: inline-block;
    margin: 0;
    line-height: 28px;
    height: 28px;
    vertical-align: top;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;How are you?&lt;/h1&gt;
&lt;fieldset&gt;
	&lt;legend&gt;Your response:&lt;/legend&gt;
	&lt;label for="radChoiceGood"&gt;
		&lt;input type="radio" id="radChoiceGood" name="radChoices" value="Good"&gt;Good
	&lt;/label&gt;
	
	&lt;label for="radChoiceExcellent"&gt;
		&lt;input type="radio" id="radChoiceExcellent" name="radChoices" value="Excellent"&gt;Excellent
	&lt;/label&gt;
	
	&lt;label for="radChoiceOk"&gt;
		&lt;input type="radio" id="radChoiceOk" name="radChoices" value="OK"&gt;OK
	&lt;/label&gt;
&lt;/fieldset&gt;</code></pre>
</div>
</div>
</p>


blocks|key|204403|text|虽然我同意表格不应该用于设计布局，但与人们普遍认为的相反，它们确实通过了验证。即table标记未被弃用。对齐单选按钮的最佳方法是使用垂直对齐中间CSS，并在输入元素上调整边距。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|204404|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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


blocks|key|204316|text|我认为，将display:inline-block添加到标签并给它们padding-top可以解决这个问题。此外，只需在标签上设置line-height也可以。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|204317|entityMap^0|5|K|Y|B|1T|B|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p>Adding <code>display:inline-block</code> to the labels and giving them <code>padding-top</code> would fix this, I think. Also, just setting the <code>line-height</code> on the labels would also.</p>


blocks|key|3056075|text|有几种方法，我更喜欢的一种是使用html格式的表格。您可以添加两列三行表格，并放置单选按钮和标签。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3056076|<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>|code-block|syntax|javascript|3056077|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>&lt;table border="0"&gt;

&lt;tr&gt;
  &lt;td&gt;&lt;input type="radio" name="sex" value="1"&gt;&lt;/td&gt;
  &lt;td&gt;radio1&lt;/td&gt;

&lt;/tr&gt;
&lt;tr&gt;
  &lt;td&gt;&lt;input type="radio" name="sex" value="2"&gt;&lt;/td&gt;
  &lt;td&gt;radio2&lt;/td&gt;

&lt;/tr&gt;
&lt;/table&gt;
</code></pre>


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

<p><img src="https://i.stack.imgur.com/qJvXN.png" alt="The radio buttons."></p>

<p>How can I vertically align the radio buttons with their labels?</p>

<p><strong>Edit:</strong> </p>

<p>Here's the html code:</p>

<pre><code>&lt;input checked="checked" type="radio" name="user_level" id="rd1" value="1"/&gt;
&lt;label for="rd1"&gt;radio 1&lt;/label&gt;&lt;br/&gt;
&lt;input type="radio" name="user_level" id="rd2" value="2"/&gt;
&lt;label for="rd2"&gt;radio 2&lt;/label&gt;&lt;br/&gt;
&lt;input type="radio" name="user_level" id="rd3" value="3"/&gt;
&lt;label for="rd3"&gt;radio 3&lt;/label&gt;&lt;br/&gt;
</code></pre>

<p>And the css code:</p>

<pre><code>label{
    padding:5px;
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
    margin: 10px;
}
</code></pre>


How to vertically align a html radio button to it's label?

我有一个带有单选按钮的表单，这些按钮与它们的标签在同一行上。然而，单选按钮并不与其标签垂直对齐，如下面的屏幕截图所示。​​如何将单选按钮与其标签垂直对齐？编辑：下面是html代码：<input checked="checked" type="radio" name="user_level" id="rd1" value="1"/><label for="rd1">radio 1</label><b

问如何将html单选按钮垂直对齐到它的标签？
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将html单选按钮垂直对齐到它的标签？EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将html单选按钮垂直对齐到它的标签？
EN