尝试垂直对齐：中间

而且你的代码看起来应该是：<表单>＜div＞<input id=“blah”type=“checkbox”><label for=“blah“>标签文本</label></div></form>

我通常将复选框保留为未标记，然后将其“标签”设置为单独的元素。这是一种痛苦，但复选框及其标签的显示方式（正如您所注意到的）在跨浏览器之间存在很大差异，这是我接近控制所有内容外观的唯一方法。

出于同样的原因，我最终也在winforms开发中这样做。我认为复选框控件的根本问题是它实际上是两个不同的控件：框和标签。通过使用复选框，您可以让控件的实现者来决定这两个元素如何彼此相邻地显示（而且他们总是出错，其中错误=不是您想要的）。

我真的希望有人能更好地回答你的问题。

也许有些人也犯了和我一样的错误？这是。。。我为输入框设置了一个宽度，因为它们大多是“文本”类型，但后来忘记了覆盖复选框的宽度，所以我的复选框试图占据大量多余的宽度，因此很难在旁边对齐标签。

.checkboxlabel {
    width: 100%;
    vertical-align: middle;
}
.checkbox {
    width: 20px !important;
}

<label for='acheckbox' class='checkboxlabel'>
    <input name="acheckbox" id='acheckbox' type="checkbox" class='checkbox'>Contact me</label>

早在IE6（使用类选择器）以及Firefox、Safari和Chrome的最新版本中，提供了可点击的标签和正确的对齐方式

我还没有完全测试过我的解决方案，但它似乎很有效。

我的HTML很简单：

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>

然后，我将高度和宽度的所有复选框设置为24px。为了使文本对齐，我使标签的行高度也为24px，并指定垂直对齐：top；像这样：

编辑：IE测试后，我添加了垂直对齐：底部；并更改了标签的CSS。你可能会发现你需要一个有条件的IE css案例来整理填充-但是文本和框是内联的。

输入[type=“checkbox”]{宽度：24px；高度：24px；垂直对齐：底部；}标签复选框{垂直对齐：顶部；线条高度：24px；边距：2px 0；显示：块；高度：24px；}<label class=“checkbox”><input type=“checkbox“value=“0000”>0000-0100</label><label class=“checkbox”><input type=“checkbox”value=“0100”>0100-0200</label><label class=“checkbox”><input type=“checkbox”value=“0200”>0200-0300</label><label class=“checkbox”><input type=“checkbox”value=“0300”>0300-0400</label>

如果有人发现这不起作用，请告诉我。以下是它的实际操作（在Chrome和IE中-道歉，因为屏幕截图是在视网膜上拍摄的，并使用了IE的类似物）：

这对我来说很好：

字段集{文本对齐：左侧；边框：无}字段集ol、字段集ul{填充：0；列表样式：无}字段集li{衬垫底部：1.5em；float：无；清除：左侧}标签{浮动：左侧；宽度：7em；右边距：1em}字段集复选框li{清晰：两者都有；衬垫：.75em}字段集复选框标签{边距：0 0 0 1em；宽度：20em}fieldset.checkboxes输入{浮动：左侧}<表单><fieldset class=“checkbox”>＜ul＞<li><input type=“checkbox”name=“happy”value=“yep”id=“happy“/><label for=“happy”>快乐</标签></li><li><input type=“checkbox”name=“饥饿”value=“yep”id=“饥饿”/>饿了吗</标签></li></ul></fieldset></form>

最简单的解决方案是

输入{垂直对齐：文本顶部；}