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

【问题标题】：Align text next to radio button对齐单选按钮旁边的文本
【发布时间】：2014-02-08 00:27:07
【问题描述】：

单选按钮旁边的文本对齐有问题。这是关于“td”中的单选按钮。所以我想将文本“Hex”垂直居中对齐到单选按钮，但我得到的是：

我得到的那个

我想变成这样：

这是我到目前为止所做的......

HTML

<td>
    <input type="radio" class="rButton" /><span class="convText">Hex</span>
</td>

CSS

.rButton{
    width:13px;
    height:12px;
}
.convText{
    font-family:'Segoe UI';
    font-size:10px;
}

【问题讨论】：

标签： html css

【解决方案1】：

DEMO

.rButton {
    width: 63px;
    height: 52px;
    vertical-align: middle;
}
.convText {
    font-family:'Segoe UI';
    font-size:20px;
    vertical-align: middle;
}

Vertical-align docs

【讨论】：

【解决方案2】：

尝试vertical-align: middle 并可能将文本/输入的line-height 设置为相等的测量值

【讨论】：

vertical-align: middle 用于单选按钮？和line-height 为span?
将它们应用于两者。您可能需要根据您的其他样式调整收音机的顶部边距，但这并不难。