48

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

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

这是一个 Jsfiddle：

http://jsfiddle.net/UnA6j/

有什么建议么？

谢谢，

艾伦。

4

10 回答 10

40

在label. 用于vertical-align将其设置为各种值 -- bottom、baseline等middle。

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

于 2013-07-25T11:56:50.397 回答
19

我想这就是你可能要求的

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>
于 2013-07-25T12:25:03.010 回答
9

习惯了这个

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

演示

于 2013-07-25T11:55:14.733 回答
5

这将在对齐时失效

input[type="radio"] {
  margin-top: 1px;
  vertical-align: top;
}
于 2017-02-02T19:34:57.173 回答
5

HTML：

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

CSS：

label input[type="radio"] { vertical-align: text-bottom; }
于 2015-11-04T05:31:35.343 回答
4

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

style="vertical-align: text-bottom;"
于 2016-09-16T10:02:50.483 回答
3

你可以尝试类似的东西；

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

于 2013-07-25T12:03:38.623 回答
2

You need to align the text to the left of radio button using float:left

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

You may use label too for more responsive output.

于 2013-07-25T12:31:38.927 回答
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>

于 2016-06-19T14:20:12.697 回答
0 

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

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

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

于 2017-03-14T16:56:10.940 回答