CSS 垂直对齐单选按钮旁边的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17857304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically aligning text next to a radio button
提问by Alan A
This is a basic CSS question, I have a radio button with a small text label after it. I want the text to appear centered vertically but the text is always aligned with the button of the radio button in my case.
这是一个基本的 CSS 问题，我有一个单选按钮，后面有一个小文本标签。我希望文本垂直居中显示，但在我的情况下，文本始终与单选按钮的按钮对齐。
<p><input type="radio" id="opt1" name="opt1" value="1" />A label</p>
Here is a Jsfiddle:
这是一个 Jsfiddle：
Any suggestions?
有什么建议？
Thanks,
谢谢，
Alan.
艾伦。
采纳答案by Prasanth
Use it inside a label. Use vertical-alignto set it to various values -- bottom, baseline, middleetc.
在label. 使用vertical-align将其设置为不同的值- ，，等。bottombaselinemiddle
回答by Rahul Thakur
I think this is what you might be asking for
我想这就是你可能会要求的
CSS
CSS
label{
font-size:18px;
vertical-align: middle;
}
input[type="radio"]{
vertical-align: middle;
}
HTML
HTML
<span>
<input type="radio" id="oddsPref" name="oddsPref" value="decimal" />
<label>Decimal</label>
</span>
回答by Rohit Azad
回答by Edward Brey
HTML:
HTML：
<label><input type="radio" id="opt1" name="opt1" value="1"> A label</label>
CSS:
CSS：
label input[type="radio"] { vertical-align: text-bottom; }
回答by Nils
This will give dead on alignment
这将导致死对齐
input[type="radio"] {
margin-top: 1px;
vertical-align: top;
}
回答by Sunil Kumar
You need to align the text to the left of radio button using float:left
您需要使用 float:left 将文本与单选按钮的左侧对齐
input[type="radio"]{
float:left;
}
You may use label too for more responsive output.
您也可以使用标签来获得更灵敏的输出。
回答by blasteralfred Ψ
You may try something like;
你可以尝试类似的东西；
<p><input type="radio" id="oddsPref" name="oddsPref" value="decimal" /><span>Decimal</span></p>
and give the span a margin top like;
并给跨度一个边距顶部；
span{
margin-top: 4px;
position:absolute;
}
here is the fiddle http://jsfiddle.net/UnA6j/11/
回答by Vasant
simple and short solution add below style:
简单而简短的解决方案添加以下样式：
style="vertical-align: text-bottom;"
回答by RamseyTech
input.radio {vertical-align:middle; margin-top:8px; margin-bottom:12px;}SIMPLY Adjust top and bottom as needed for PERFECT ALIGNMENT of radio button or checkbox
只需根据需要调整顶部和底部，即可完美对齐单选按钮或复选框
<input type="radio" class="radio">回答by Olivia Steger
You could also try something like this:
你也可以尝试这样的事情：
input[type="radio"] {
margin-top: -1px;
vertical-align: middle;
} <label class="child"><input id = "warm" type="radio" name="weathertype" value="warm" checked> Warm<br></label>
<label class="child1"><input id = "cold" type="radio" name="weathertype" value="cold" checked> Cold<br></label>