垂直对齐单选按钮旁边的文本

Posted 2023-03-27

【中文标题】垂直对齐单选按钮旁边的文本

【英文标题】：Vertically aligning text next to a radio button

【发布时间】：2013-07-25 07:17:38

【问题描述】：

这是一个基本的 CSS 问题，我有一个带有小文本标签的单选按钮。我希望文本垂直居中显示，但在我的情况下，文本始终与单选按钮的按钮对齐。

<p><input type="radio" id="opt1" name="opt1" value="1" />A label</p>

这是一个 Jsfiddle：

http://jsfiddle.net/UnA6j/

有什么建议吗？

谢谢，

艾伦。

【问题讨论】：

jsfiddle.net/UnA6j/5

您应该使用<label> 作为标签而不是段落。

【参考方案1】：

在label 中使用它。使用vertical-align 将其设置为各种值——bottom、baseline、middle 等。

http://jsfiddle.net/UnA6j/5/

【讨论】：

谢谢...我仍然无法将更新后的代码与标签对齐。jsfiddle.net/UnA6j/5

好的，我搞定了，我修改了您的代码并调整了无线电 ipnut 以使其上边距为负，从而使对齐精确。负边距是否被接受，感觉不对！ jsfiddle.net/UnA6j/5

很好.. 我不认为负边距是一个问题.. 如果它适用于所有浏览器，那很好.. 是常态

您还可以对vertical-align 规则使用数值。例如vertical-align:-1px;

谢谢，我和vertical-align: sub;对齐了

【参考方案2】：

我想这就是你可能要求的

http://jsbin.com/ixowuw/2/

CSS

label
  font-size:18px;
  vertical-align: middle;


input[type="radio"]
  vertical-align: middle;

html

<span>
  <input type="radio" id="oddsPref" name="oddsPref" value="decimal" />
  <label>Decimal</label>
</span>

【讨论】：

@Rahul-Thakus 感谢您的代码给了我同样的问题.. 文本与基线对齐....

确保它没有被其他父属性覆盖，顺便说一句您使用的是什么浏览器？

@Protectorone 对 html 和 css 做了一些小的改动。请试试这个，应该也适用于更大的字体。

还要确保您的单选按钮上没有任何边距。这把我搞砸了。

【参考方案3】：

习惯了

    input[type="radio"]
    vertical-align:top;
    
p
    font-size:10px;line-height: 18px;

Demo

【参考方案4】：

这将在对齐时死机

input[type="radio"] 
  margin-top: 1px;
  vertical-align: top;

【参考方案5】：

HTML：

<label><input type="radio" id="opt1" name="opt1" value="1"> A label</label>

CSS：

label input[type="radio"]  vertical-align: text-bottom; 

【参考方案6】：

简单而简短的解决方案添加以下样式：

style="vertical-align: text-bottom;"

【参考方案7】：

你可以试试类似的东西；

<p><input type="radio" id="oddsPref" name="oddsPref" value="decimal" /><span>Decimal</span></p>

并给跨度一个顶部的边距；

span
    margin-top: 4px;
    position:absolute;

这是小提琴http://jsfiddle.net/UnA6j/11/

【讨论】：

我需要使用相对而不是绝对字体大小进行跨浏览器放置，这会在不同浏览器中产生不同大小的文本。您的帖子让我想到在 ems 中使用负边距顶部值来补偿，这很有效！

谢谢@grw。如果它适合你，请考虑支持我的答案:)

【参考方案8】：

您需要使用 float:left 将文本对齐到单选按钮的左侧

input[type="radio"]
float:left;

您也可以使用标签来获得更灵敏的输出。

【参考方案9】：

你也可以试试这样的：

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>

【讨论】：

您的解决方案非常好。我刚刚投票了

【参考方案10】：

input.radio vertical-align:middle; margin-top:8px; margin-bottom:12px;

根据需要简单调整顶部和底部以完美对齐单选按钮或复选框

<input type="radio" class="radio">