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