这是经常困扰我的 CSS 小问题之一。

Stack Overflow 周围的人如何垂直对齐checkboxes和他们的labels始终如一地跨浏览器?

每当我在 Safari 中正确对齐它们时（通常使用vertical-align: baseline on the input），它们在 Firefox 和 IE 中完全关闭。

在 Firefox 中修复它，Safari 和 IE 不可避免地会混乱。每次编写表单时我都会在这方面浪费时间。

这是我使用的标准代码：

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

我通常使用 Eric Meyer 的重置，因此表单元素的覆盖相对干净。期待您提供任何提示或技巧！

警告！这个答案是too old and 不起作用在现代浏览器上。

_{I'm not the poster of this answer, but at the time of writing this, this is the most voted answer by far in both positive and negative votes (+1035 -17), and it's still marked as accepted answer (probably because the original poster of the question is the one who wrote this answer).}

正如评论中多次指出的那样，这个答案不再适用于大多数浏览器（并且自 2013 年以来似乎无法做到这一点）。

经过一个多小时的调整、测试和尝试不同样式的标记后，我想我可能有一个不错的解决方案。这个特定项目的要求是：

1. 输入必须在自己的行上。
2. 在所有浏览器中，复选框输入需要与标签文本类似（如果不相同）垂直对齐。
3. 如果标签文本换行，则需要缩进（因此复选框下方不会换行）。

在进行任何解释之前，我先给您代码：

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

这是工作示例JSFiddle.

此代码假设您使用像 Eric Meyer 那样的重置，它不会覆盖表单输入边距和填充（因此将边距和填充重置放入输入 CSS 中）。显然，在实时环境中，您可能会嵌套/覆盖一些内容来支持其他输入元素，但我想让事情保持简单。

注意事项：

• The *overflow声明是一个内联 IE 黑客（星属性黑客）。 IE 6 和 7 都会注意到它，但 Safari 和 Firefox 会正确地忽略它。我认为这可能是有效的 CSS，但你最好使用条件注释；只是为了简单而使用它。
• 据我所知，唯一vertical-align跨浏览器一致的声明是vertical-align: bottom。设置此值然后相对向上定位在 Safari、Firefox 和 IE 中的表现几乎相同，只有一两个像素的差异。
• 使用对齐的主要问题是 IE 在输入元素周围留下了一堆神秘的空间。它不是填充或边距，而且它是持久的。在复选框上设置宽度和高度，然后overflow: hidden由于某种原因，切断了额外的空间，并允许 IE 的定位与 Safari 和 Firefox 非常相似。
• 根据您的文本大小，您无疑需要调整相对位置、宽度、高度等以使内容看起来正确。

除了我今天早上正在做的项目之外，我还没有在任何项目上尝试过这种特定的技术，所以如果你发现一些更一致的东西，一定要继续。

警告！这个答案是too old and 不起作用在现代浏览器上。