html - HTML/CSS 中的单选/复选框对齐

Question

将单选按钮/复选框与文本正确对齐的最简洁方法是什么？到目前为止，我一直在使用的唯一可靠的解决方案是基于表的:

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

这可能会被一些人反对。我刚刚(再次)花了一些时间研究无表解决方案但失败了。我已经尝试了 float 、绝对/相对定位和类似方法的各种组合。不仅它们大多默默地依赖单选按钮/复选框的估计高度，而且它们在不同浏览器中的行为也不同。理想情况下，我想找到一个不对大小或特殊浏览器怪癖做任何假设的解决方案。我可以使用表格，但我想知道哪里有其他解决方案。

Answer 1

我想我终于解决了这个问题。一种通常推荐的解决方案是使用 vertical-align: middle:

<input type="radio" style="vertical-align: middle"> Label

然而，问题是这仍然会产生可见的错位，即使它在理论上应该可行。 CSS2 规范说:

vertical-align: middle: Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

所以它应该在完美的中心(x-height 是字符 x 的高度)。然而，问题似乎是由浏览器通常向单选按钮和复选框添加一些随机不均匀的边距引起的。例如，可以使用 Firebug 在 Firefox 中检查 Firefox 中的默认复选框边距是 3px 3px 0px 5px。我不确定它来自哪里，但其他浏览器似乎也有类似的利润率。因此，为了获得完美对齐，需要去除这些边距:

<input type="radio" style="vertical-align: middle; margin: 0px;"> Label

值得注意的是，在基于表格的解决方案中，边距以某种方式被吃掉了，一切都很好地对齐。