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

Question

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

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

这是一个Jsfiddle:

http://jsfiddle.net/UnA6j/

有什么建议？

谢谢,

艾伦.

Answer 1

在里面使用它label.使用vertical-align将其设置为不同的值- ,,bottom 等.baselinemiddle

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

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

Answer 3

习惯了

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

演示

Answer 4

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

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

Answer 5

HTML:

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

CSS:

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

Answer 6

这将导致对齐死亡

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