在單選按鈕旁邊對齊文本

Question

單選按鈕旁邊的文本對齊方式出現問題。 關於“ td”中的單選按鈕。 所以我想將文本“十六進制”垂直對齊到單選按鈕的中心，但是我得到的是：

我得到的那個

我想要這樣：

到目前為止，這是我所做的...

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;
}

Answer 1

DEMO

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

垂直對齊文檔

Answer 2

嘗試vertical-align: middle並可能將文本/輸入的line-height設置為相等的尺寸