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

【问题标题】：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> 作为标签而不是段落。

标签： css alignment radio

【解决方案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;}

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

&lt;input type="radio" class="radio"&gt;

【讨论】：