在单选按钮旁垂直对齐文本

Question

在单选按钮旁垂直对齐文本

50

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

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

这是一个 Jsfiddle 的链接：

http://jsfiddle.net/UnA6j/

有什么建议吗？

谢谢，

Alan。

- Alan A

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

3

应该使用 <label> 元素作为标签而不是段落。 - Musa

10个回答

23

我想这可能是你所要求的

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

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

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

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

- Rahul Thakur

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

请确保它没有被其他父属性覆盖，顺便问一下你在使用哪个浏览器？ - Rahul Thakur

@Protectorone在HTML和CSS中进行了小的更改。请尝试这个，应该适用于更大的字体。 - Rahul Thakur

请确保你的单选按钮没有任何边距。那个问题让我很困扰。 - dallin

9

用于此

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

Demo

- Rohit Azad Malik

7

这将使对准完美无误。

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

- Nils

6

以下是简单易懂的解决方案，只需添加以下样式：

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

- Vasant

5

HTML:

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

CSS：

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

- Edward Brey

3

您可以尝试类似以下方式：

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

并给该span元素添加margin-top属性，如下：

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

here is the fiddle http://jsfiddle.net/UnA6j/11/

- Alfred

我需要跨浏览器的相对字体大小而非绝对字体大小，因为在不同的浏览器中文本大小会有所不同。你的帖子给了我使用负em值的margin-top来进行补偿的想法，这起到了作用！ - grw

感谢 @grw。如果我的回答对您有帮助，请考虑给我点赞 :) - Alfred

2

你需要使用float:left将文本与单选按钮左对齐。

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

您可以使用标签来实现更具响应性的输出。

- Sunil Kumar

1

你也可以尝试这样做：

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>

- Olivia Steger

你的解决方案非常好。我刚刚点了赞。 - Hong Van Vit

0

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

只需根据需要调整顶部和底部，即可完美对齐单选按钮或复选框

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

- RamseyTech

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Prasanth · Accepted Answer

将其放置在 label 标签内。使用 vertical-align 属性将其设置为不同的值 -- 如 bottom、baseline、middle 等。

input[type="radio"] {
  vertical-align: baseline;
}

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

<label>
  <input type="radio" id="oddsPref" name="oddsPref" value="decimal" /> <img src="https://via.placeholder.com/80x30">
</label>