这是一直困扰着我的CSS小问题之一。 Stack Overflow周围的人们如何垂直对齐 checkboxes 和他们的 labels 始终如一 跨浏览器？每当我在Safari中正确对齐它们时（通常使用 vertical-align: baseline 在...上 input），他们完全脱离了Firefox和IE。修复它在Firefox中，Safari和IE不可避免地搞砸了。每次编写表单时，我都会浪费时间。
这是我使用的标准代码：
<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
</form>我通常使用Eric Meyer的重置，因此表单元素相对干净的覆盖。期待您提供的任何提示或技巧！
经过一个多小时的调整，测试和尝试不同风格的标记，我想我可能有一个不错的解决方案。该特定项目的要求是：
在我做出任何解释之前，我会给你代码：
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中放置边距和填充重置）。显然，在实时环境中，你可能会嵌套/覆盖一些东西以支持其他输入元素，但我想保持简单。
注意事项：
*overflow 声明是内联IE黑客（明星属性黑客）。 IE 6和7都会注意到它，但Safari和Firefox会正确地忽略它。我认为它可能是有效的CSS，但你最好还是有条件的评论;只是为了简单而使用它。vertical-align 跨浏览器一致的声明是 vertical-align: bottom。在Safari，Firefox和IE中设置此值然后向上相对定位几乎完全相同，只有一两个像素差异。overflow: hidden 由于某种原因，切断了额外的空间，并允许IE的定位与Safari和Firefox非常相似。希望这有助于其他人！我没有在我今天早上工作的任何项目上尝试过这种特定的技术，所以如果你发现一些工作更加一致的话，肯定会搞定。
有时vertical-align需要彼此相邻的两个内联（span，label，input等）元素才能正常工作。以下复选框在IE，Safari，FF和Chrome中正确垂直居中，即使文本大小非常小或很大。
它们都在同一行上彼此相邻浮动，但nowrap意味着整个标签文本始终位于复选框旁边。
缺点是额外无意义的SPAN标签。
.checkboxes label {
display: block;
float: left;
padding-right: 10px;
white-space: nowrap;
}
.checkboxes input {
vertical-align: middle;
}
.checkboxes label span {
vertical-align: middle;
}<form>
<div class="checkboxes">
<label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
<label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
<label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
</div>
</form>现在，如果您有一个非常长的标签文本 需要 要在没有包装的情况下进行包装，请在标签元素上使用填充和负文本缩进：
.checkboxes label {
display: block;
float: left;
padding-right: 10px;
padding-left: 22px;
text-indent: -22px;
}
.checkboxes input {
vertical-align: middle;
}
.checkboxes label span {
vertical-align: middle;
}<form>
<div class="checkboxes">
<label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
<label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
<label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
</div>
</form>工作 一个蜡笔的解决方案，我有一些适合我的东西，更简单：
input[type=checkbox], input[type=radio] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
input[type=radio] {
bottom: 2px;
}<label>
<input type="checkbox">
Label text
</label>在Safari（我相信其基线）中，像素对像素的渲染方式相同，Firefox和IE7都检查得很好。它也适用于各种标签字体，无论大小。现在，修复IE的选择和输入基线......
尝试 vertical-align: middle
您的代码似乎应该是：
<form>
<div>
<input id="blah" type="checkbox"><label for="blah">Label text</label>
</div>
</form>尝试我的解决方案，我在IE 6，FF2和Chrome中尝试了它，它在所有三个浏览器中逐个像素地渲染。
* {
padding: 0px;
margin: 0px;
}
#wb {
width: 15px;
height: 15px;
float: left;
}
#somelabel {
float: left;
padding-left: 3px;
}<div>
<input id="wb" type="checkbox" />
<label for="wb" id="somelabel">Web Browser</label>
</div>对我来说唯一完美的解决方案是：
input[type=checkbox], input[type=radio] {
vertical-align: -2px;
margin: 0;
padding: 0;
}
今天在Chrome，Firefox，Opera，IE 7和8中进行了测试。示例： 小提琴
我通常使用行高来调整静态文本的垂直位置：
label {
line-height: 18px;
}
input {
width: 13px;
height: 18px;
font-size: 12px;
line-height: 12px;
}<form>
<div>
<label><input type="checkbox" /> Label text</label>
</div>
</form>希望有所帮助。