这是困扰我的CSS小问题之一。
Stack Overflow周围的人如何在浏览器中始终垂直对齐复选框及其标签？
每当我在Safari中正确对齐它们（通常在输入上使用垂直对齐：基线），它们在Firefox和IE中就完全关闭了。
在Firefox中修复它，Safari和IE不可避免地被搞砸了。我每次编写表单时都在这上面浪费时间。
以下是我使用的标准代码：
<表单>＜div＞<label><input-type=“checkbox”/>标签文本</label></div></form>
我通常使用埃里克·迈耶的重置，所以表单元素相对来说没有覆盖。期待您提供的任何提示或技巧！
当前回答
<fieldset class="checks">
<legend>checks for whatevers</legend>
<input type="" id="x" />
<label for="x">Label</label>
<input type="" id="y" />
<label for="y">Label</label>
<input type="" id="z" />
<label for="z">Label</label>
</fieldset>
无论如何，您应该将分组在一起的表单控件包装在它们自己的字段集中，在这里，它播放包装。设置输入/标签显示：块，输入浮动左，标签浮动右，设置宽度，控制左右边距的间距，相应地对齐标签文本。
so
fieldset.checks {
width:200px
}
.checks input, .checks label {
display:block;
}
.checks input {
float:right;
width:10px;
margin-right:5px
}
.checks label {
float:left;
width:180px;
margin-left:5px;
text-align:left;
text-indent:5px
}
对于跨浏览器/媒体解决方案，您可能需要同时设置边框、轮廓和线条高度。
其他回答
尝试我的解决方案，我在IE 6、FF2和Chrome中尝试过，它在所有三种浏览器中逐像素渲染。
* {填充：0px；边距：0px；}#世界银行{宽度：15px；高度：15px；浮动：左侧；}#某人标签{浮动：左侧；左侧填充：3px；}＜div＞<input id=“wb”type=“checkbox”/><label for=“wb”id=“somelabel”>Web浏览器</label></div>
为了与浏览器中的表单字段保持一致，我们使用：框大小调整：边框框
button, checkbox, input, radio, textarea, submit, reset, search, any-form-field {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
尝试此代码
input[type="checkbox"] {
-moz-appearance: checkbox;
-webkit-appearance: checkbox;
margin-left:3px;
border:0;
vertical-align: middle;
top: -1px;
bottom: 1px;
*overflow: hidden;
box-sizing: border-box; /* 1 */
*height: 13px; /* Removes excess padding in IE 7 */
*width: 13px;
background: #fff;
}
正如pokrishka已经建议的那样，简单地使用垂直对齐：sub。
不停摆弄
HTML代码：
<div class="checkboxes">
<label for="check1">Test</label>
<input id="check1" type="checkbox"></input>
</div>
CSS代码：
.checkboxes input {
vertical-align: sub;
}
这不是解决问题的最佳方式
vertical-align: middle
将style=“position:relative；top:2px；”添加到输入框会将其向下移动2px。因此，根据您的字体大小，您可以移动它。
