HTML - 對齊單選按鈕和文本

Question

假設您有兩個相鄰的簡單表格單元格。
一個包含一個單選按鈕和文本。另一個只包含文本。

單選按鈕的大小設置爲16x16像素（不要問我爲什麼，假設它就是這樣）。
字體大小爲12像素。

如何使標籤和單選按鈕在所有主流瀏覽器中沿着（或相當接近）排列的垂直中間一致排列？

樣本HTML，讓你開始：

<style type="text/css"> 
td { 
    font-size: 12px; 
    font-family: Verdana; 
} 

.radio { 
    width: 16px; 
    height: 16px; 
    vertical-align: middle; 
    margin: 0px; 
} 

.blah { 
    text-decoration: line-through; 
} 
</style> 

<table> 
    <tr> 
    <td> 
     <input type="radio" class="radio" /> 
     <span class="blah">O</span> 
    </td> 
    <td> 
     <span class="blah">O</span> 
    </td> 
    </tr> 
</table> 

在我安裝了IE，歌劇，火狐和Chrome的版本，上面呈現類似this

我期待看到的結果是一個在IE上顯示的圖像？真的嗎？

其餘的看起來足夠接近，但是我爲排列文本所做的任何嘗試使得它在4個瀏覽器中的至少2箇中總是看起來很糟糕。要做到這一點

Answer 1

谷歌搜索 「垂直對齊：中間」 的Gavin基斯特納，這是有用的發現this short explanation。我嘗試了該頁面上的最終建議，該建議似乎在Chrome，IE，Firefox，Opera和Safari中得到了推崇。

我所做的是添加td{ line-height:1.5em } - 請參閱鏈接的解釋。

Answer 2

的一個方法是爲嵌套表添加到你的第一個兩個格，並把在兩個小區的單選按鈕，第一區間（嵌套表內）

<table> 
    <tr> 
    <td> 
     <table><tr><td><input type="radio" class="radio" /></td> 
     <td><span class="blah">O</span></td></tr></table> 
    </td> 
    <td> 
     <span class="blah">O</span> 
    </td> 
    </tr> 
</table> 

Answer 3

快速射擊在黑暗中：

• 給無線電輸入元件它自己的表格單元格？那麼至少文本應該互相排列。
• 把vertical-align:middle;改爲td而不是.radio？仍可能導致問題，因爲與無線輸入元素單元格中的文本的基線仍可以通過輸入元素來決定...

Answer 4

<td> 
    <input type="radio" class="radio" /> 
</td> 
<td> 
    <span class="blah">O</span> <!-- text --> 
</td> 
<td> 
    <span class="blah">O</span> <!-- text2 --> 
</td> 

你爲什麼不把文字在其自己的柱。

Answer 5

一個快速解決方法是使無線電的td和width:16px;height:16px;的font-size:12px;相等。

2的例子：

td { 
    font-size: 12px; 
} 
input[type=radio] { 
    width: 12px; /* resize radio */ 
    height: 12px; 
} 

和

td { 
    font-size: 16px; /* resize font-size */ 
} 
input[type=radio] { 
    width: 16px; 
    height: 16px; 
}