将单选按钮/复选框与文本正确对齐的最干净方式是什么？到目前为止，我一直在使用的唯一可靠的解决方案是基于表的:
<table>
<tr>
<td><input type="radio" name="opt"></td>
<td>Option 1</td>
</tr>
<tr>
<td><input type="radio" name="opt"></td>
<td>Option 2</td>
</tr>
</table>
这可能会引起一些人的不满.我刚刚花了一些时间(再次)研究一种无表解决方案，但失败了.我try 过浮动、绝对/相对定位和类似方法的各种组合.它们不仅主要静默地依赖于单选按钮/复选框的估计高度，而且它们在不同浏览器中的行为也不同.理想情况下，我希望找到一个不假定任何大小或特殊浏览器怪癖的解决方案.我可以使用桌子，但是我想知道哪里还有其他的解决方案.
我想我终于解决了这个问题.一种常用的建议解决方案是使用垂直对齐:中间:
<input type="radio" style="vertical-align: middle"> Label
然而，问题是，尽管理论上它应该是可行的，但它仍然会产生明显的失调.CSS2规范规定:
vertical-align: middle:将长方体的垂直中点与父长方体的基线加上父长方体x高度的一半对齐.
所以它应该在完美的中心(x高度是字符x的高度).然而，这个问题似乎是因为浏览器通常会在单选按钮和复选框中添加一些随机的、不均匀的边距.例如，在使用Firebug的Firefox中，您可以判断Firefox中的默认复选框边界是否为3px 3px 0px 5px.我不知道它是从哪里来的，但其他浏览器似乎也有类似的利润率.因此，要获得完美的对准，需要go 掉这些边距:
<input type="radio" style="vertical-align: middle; margin: 0px;"> Label
值得注意的是，在基于表格的解决方案中，页边距以某种方式被吃掉，所有内容都很好地对齐.