HTMLCSS中的单选复选框对齐

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

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

<input type="radio" > Label

然而，问题在于，即使从理论上讲它仍然会产生可见的未对准。CSS2规范指出：

vertical-align：middle： 将框的垂直中点与父框的基线对齐，再加上父框的x高度的一半。

因此，它应该位于完美的中心（x高度是字符x的高度）。但是，该问题似乎是由于浏览器通常在单选按钮和复选框中添加了一些随机的不均匀边距引起的。例如，您可以使用Firefox在Firefox中检查Firefox的默认复选框边距为

3px3px 0px 5px

。我不确定它来自哪里，但其他浏览器的利润似乎也差不多。因此，要获得完美的一致性，就需要摆脱这些空白：

<input type="radio" > Label

仍然值得一提的是，在基于表的解决方案中，边距以某种方式被吞噬，并且所有内容都很好地对齐。