尝试vertical-align: middle

你的代码看起来应该是：

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

我通常会保留一个未标记的复选框，然后将其“标签”作为一个单独的元素。这很麻烦，但是复选框及其标签的显示方式（如您所注意到的）之间存在如此多的跨浏览器差异，以至于这是我可以接近控制一切外观的唯一方法。

出于同样的原因，我在winform开发中也这样做了。我认为复选框控件的根本问题在于它实际上是两个不同的控件：框和标签。通过使用复选框，您将由控件的实现者决定这两个元素如何相邻显示（他们总是弄错，错误的地方不是您想要的）。

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

警告！在现代浏览器上，这个答案是<强>太老和不行。

_{我不是这个答案的海报，但在写这篇文章的时候，这是迄今为止在正面和负面投票中投票最多的答案（+1035-17），它仍然被标记为接受答案（可能是因为问题的原始海报是写这个答案的人）。}

正如已经在评论中多次指出的那样，这个答案不再适用于大多数浏览器（并且自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中设置了边距和填充重置）。显然，在实时环境中，你可能会嵌套/覆盖一些东西来支持其他输入元素，但我想保持简单。

注意事项：

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

希望这能帮助到其他人！除了今天早上我正在做的那个项目之外，我还没有在任何项目上尝试过这种特定的技术，所以如果你找到了更一致的方法，一定要停下来。

警告！在现代浏览器上，这个答案是<强>太老和不行。

我从来没有遇到过这样做的问题：

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

我通常使用行高来调整静态文本的垂直位置：

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>

希望有帮助。

试试我的解决方案，我在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>

有时垂直对齐需要两个相邻的内联（跨度、标签、输入等…）元素才能正常工作。以下复选框在IE、Safari、FF和Chrome中正确垂直居中，即使文本大小很小或很大。

它们都在同一行上彼此相邻浮动，但nowrap意味着整个标签文本始终保持在复选框旁边。

缺点是额外的无意义的SPAN标签。

.checkboxes label {display: inline-block;padding-right: 10px;white-space: nowrap;}.checkboxes input {vertical-align: middle;}.checkboxes label span {vertical-align: middle;}

<form><div class="checkboxes"><label><input type="checkbox"> <span>Label text x</span></label><label><input type="checkbox"> <span>Label text y</span></label><label><input type="checkbox"> <span>Label text z</span></label></div></form>

现在，如果您有一个非常长的标签文本，需要要在复选框下包装而不包装，您将在标签元素上使用填充和负文本缩进：

.checkboxes label {display: block;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><input type="checkbox"> <span>Label text x so long that it will probably wrap so let's see how it goes with the proposed CSS (expected: two lines are aligned nicely)</span></label><label><input type="checkbox"> <span>Label text y</span></label><label><input type="checkbox"> <span>Label text z</span></label></div></form>

这对我很有效：

fieldset {text-align:left;border:none}fieldset ol, fieldset ul {padding:0;list-style:none}fieldset li {padding-bottom:1.5em;float:none;clear:left}label {float:left;width:7em;margin-right:1em}fieldset.checkboxes li {clear:both;padding:.75em}fieldset.checkboxes label {margin:0 0 0 1em;width:20em}fieldset.checkboxes input {float:left}

<form><fieldset class="checkboxes"><ul><li><input type="checkbox" name="happy" value="yep" id="happy" /><label for="happy">Happy?</label></li><li><input type="checkbox" name="hungry" value="yep" id="hungry" /><label for="hungry">Hungry?</label></li></ul></fieldset></form>

耶，谢谢！这也一直让我发疯。

在我的特殊情况下，这对我很有效：

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

我使用的reset.css可以解释一些差异，但这似乎对我很有效。

从一个蜡笔的解决方案开始，我有一些适合我的东西，而且更简单：

.font2 {font-family:Arial; font-size:32px} /* Sample font */
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><p class="font2"><label><input type="checkbox"/> Label text</label></p>

在Safari（我信任其基线）和Firefox和IE7中渲染像素对像素相同。它也适用于各种标签字体大小，无论大小。现在，为了修复IE在选择和输入上的基线…

更新时间：（第三方编辑）

正确的bottom位置取决于font-Family和font-size！我发现在复选框和单选元素中使用#1是一个很好的通用值。我在Chrome /Firefox/IE11使用Arial和Calibri字体的窗口中测试了它，使用了几个小/中/大font-size。

.font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */
input[type=checkbox], input[type=radio] {vertical-align: middle;position: relative;bottom: .08em; /* this is a better value for different fonts! */}

<label><input type="checkbox" /> Label text</label>
<p class="font2"><label><input type="checkbox"/> Label text</label></p>

输入类型复选框包裹在标签内并浮动到左侧，如下所示：

<label for="id" class="checkbox"><input type="checkbox" id="id"><span>The Label</span></label>

这对我有用：

label.checkbox {display: block;}.checkbox input {float: left;height: 18px;vertical-align: middle;}.checkbox span {float: left;line-height: 18px;margin: 0 0 0 20px;}

请确保的高度是相同的行高度（块级别）。

input {margin: 0;}

真的起作用了

一个简单的事情似乎工作得很好，就是应用一个调整垂直对齐复选框的垂直位置。它仍然会因浏览器而异，但解决方案并不复杂。

input {vertical-align: -2px;}

引用

这不是解决问题的最好办法

vertical-align: middle

将style="position:relative;top:2px;"添加到输入框会将其向下移动2px。因此，根据您的字体大小，您可以将其移动。

position: relative;在IE中存在一些问题，例如z-index和jQuery的SlideUp/SlideDown等动画。

css：

input[type=checkbox], input[type=radio] {vertical-align: baseline;position: relative;top: 3px;margin: 0 3px 0 0;padding: 0px;}input.ie7[type=checkbox], input.ie7[type=radio] {vertical-align: middle;position: static;margin-bottom: -2px;height: 13px;width: 13px;}

jQuery：

$(document).ready(function () {if ($.browser.msie && $.browser.version <= 7) {$('input[type=checkbox]').addClass('ie7');$('input[type=radio]').addClass('ie7');}});

样式可能需要根据<label>中使用的字体大小进行调整

PS：
我使用ie7js使css在IE6中工作。

<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>

设置输入/标签做显示：块，输入浮动左，标签浮动右，设置你的宽度，控制行间距与左/右边距，对齐相应的标签文本。

所以

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}

对于跨浏览器/媒体解决方案，您可能还需要在两者上设置边框、轮廓和行高。

如果您使用ASP.NETWeb窗体，您无需担心DIV和其他元素或固定大小。我们可以通过将float:left设置为CSS中的CheckboxList输入类型来对齐<asp:CheckBoxList>文本。

请检查以下示例代码：

.CheckboxList{font-size: 14px;color: #333333;}.CheckboxList input{float: left;clear: both;}

. ASPX代码：

<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList"></asp:CheckBoxList>

<form><div><label style="display: inline-block"><input style="vertical-align: middle" type="checkbox" /><span style="vertical-align: middle">Label text</span></label></div></form>

诀窍是仅在表格单元格中使用垂直对齐，如果使用标签标签，则使用inline-block。

css：

.threeCol .listItem {width:13.9em;padding:.2em;margin:.2em;float:left;border-bottom:solid #f3f3f3 1px;}.threeCol input {float:left;width:auto;margin:.2em .2em .2em 0;border:none;background:none;}.threeCol label {float:left;margin:.1em 0 .1em 0;}

超文本标记语言：

<div class="threeCol"><div class="listItem"><input type="checkbox" name="name" id="id" value="checkbox1" /><label for="name">This is your checkBox</label></div></div>

上面的代码将把你的列表项放在三个元素中，然后改变宽度以适应。

我发现了一种方法，它在几乎所有浏览器中都能给出相同的结果。至少是最新的浏览器。它适用于Firefox，Chrome，Safari，Opera。在IE中，它看起来几乎就像没有规则应用于输入或标签（即，它仍然会有标签下面输入），所以我认为这是可以原谅的。

超文本标记语言

<label class="boxfix"><input type="radio">Label</label>

css

.boxfix {vertical-align: bottom;}.boxfix input {margin: 0;vertical-align: bottom;position: relative;top: 1.999px; /* the inputs are slightly more centered in IE at 1px (they don't interpret the .999 here), and Opera will round it to 2px with three decimals */}

如果您使用的是Twitter Bootstrap，您可以在<label>上使用checkbox类：

<label class="checkbox"><input type="checkbox"> Remember me</label>

我还没有完全测试我的解决方案，但它似乎工作得很好。

我的超文本标记语言很简单：

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

然后，我将高度和宽度的所有复选框设置为24px。为了使文本对齐，我将标签的line-height也设置为24px并像这样分配vertical-align: top;：

编辑：在IE测试后，我在输入中添加了vertical-align: bottom;并更改了标签的CSS。您可能会发现您需要一个条件IE css案例来整理填充-但文本和框是内联的。

input[type="checkbox"] {width: 24px;height: 24px;vertical-align: bottom;}label.checkbox {vertical-align: top;line-height: 24px;margin: 2px 0;display: block;height: 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的并行）：

我为输入框设置了一个宽度，因为它们大多是'text'类型，但后来忘记为复选框覆盖那个宽度——所以我的复选框试图占用很多多余的宽度，所以很难在旁边对齐标签。

.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

为了与浏览器中的表单字段保持一致，我们使用：框大小：边框框

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;}

在Chrome28 OSX中，选择的400+赞成票的答案对我不起作用，可能是因为它没有在OSX中进行测试，或者它在2008年回答这个问题时确实有效。

泰晤士报已经改变了，新的CSS3解决方案现在是可行的。我的解决方案使用伪元素来创建自定义复选框。所以规定（优点或缺点，无论你怎么看）如下：

• 仅适用于现代浏览器（FF3.6+，IE9+，Chrome，Safari）
• 依赖于自定义设计的复选框，在每个浏览器/操作系统中都会呈现完全相同的效果。在这里，我刚刚选择了一些简单的颜色，但是你总是可以添加线性渐变等来给它更多的冲击。
• 适合特定的字体/字体大小，如果更改，您只需更改复选框的位置和大小，使其看起来垂直对齐。如果调整正确，最终结果在所有浏览器/操作系统中仍然应该接近完全相同。
• 没有垂直对齐属性，没有浮动
• 必须使用我的示例中提供的标记，如果结构像问题一样，它将无法工作，但是，布局基本上看起来是一样的。如果你想移动东西，你还必须移动关联的CSS

div.checkbox {position: relative;font-family: Arial;font-size: 13px;}label {position: relative;padding-left: 16px;}label::before {content :"";display: inline-block;width: 10px;height: 10px;background-color: white;border: solid 1px #9C9C9C;position: absolute;top: 1px;left: 0px;}label::after {content:"";width: 8px;height: 8px;background-color: #666666;position: absolute;left: 2px;top: 3px;display: none;}input[type=checkbox] {visibility: hidden;position: absolute;}input[type=checkbox]:checked + label::after {display: block;}input[type=checkbox]:active + label::before {background-color: #DDDDDD;}

<form><div class="checkbox"><input id="check_me" type=checkbox /><label for="check_me">Label for checkbox</label></div></form>

此解决方案隐藏复选框，并将伪元素添加到标签并设置样式以创建可见复选框。因为标签绑定到隐藏复选框，所以输入字段仍将更新，并且值将与表单一起提交。

如果你有兴趣，这是我对单选按钮的看法：http://jsfiddle.net/DtKrV/2/

希望有人觉得这个有用！

试试这个代码

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;}

我想这是最简单的方法

input {position: relative;top: 1px;}

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

所以我知道这个问题已经被回答了很多次，但我觉得我有一个比已经提供的更优雅的解决方案。不仅仅是1个优雅的解决方案，而是2个单独的解决方案来满足你的幻想。话虽如此，你需要知道和看到的一切都包含在2个JS Fiddle中，并附有评论。

解决方案#1依赖于给定浏览器的本机“复选框”，尽管有一个扭曲……它包含在一个更容易定位跨浏览器的div中，带有溢出：隐藏以删除多余的1px拉伸复选框（这是因为你看不到FF的丑陋边框）

简单的超文本标记语言：（按照链接查看带有注释的css，代码块是为了满足stackoverflow）http://jsfiddle.net/KQghJ/

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

解决方案#2使用“复选框切换哈克”来切换DIV的CSS状态，该DIV已在浏览器中正确定位，并使用简单的精灵为复选框未选中和选中状态进行设置。所需要的只是使用所述复选框切换哈克调整背景位置。在我看来，这是更优雅的解决方案，因为您可以更好地控制复选框和无线电，并且可以保证它们在浏览器中看起来相同。

简单的超文本标记语言：（按照链接查看带有注释的CSS，代码块为满足StackOverflow）http://jsfiddle.net/Sx5M2/

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

如果有人不同意这些方法，请给我留言，我很想听到一些反馈，为什么其他人没有遇到这些解决方案，或者如果他们有，为什么我在这里看不到关于他们的答案？如果有人看到这些方法中的一个失败了，也很高兴看到，但这些已经在最新的浏览器中进行了测试，并依赖于超文本标记语言/CSS方法，这些方法非常古老，据我所知是通用的。

硬编码复选框的高度和宽度，删除其填充，并使其高度加上垂直边距等于标签的line-高度。如果标签文本是内联的，请浮动复选框。Firefox、Chrome和IE7+都以相同的方式呈现以下示例：http://www.kornea.com/css-checkbox-align

我不喜欢相对定位，因为它使元素在其水平上呈现在其他所有元素之上（如果你有复杂的布局，它可以在某些东西之上）。

我发现vertical-align: sub使复选框在Chrome，Firefox和Opera中看起来足够对齐。由于我没有MacOS和IE10而无法检查Safari，但我发现它对我来说是足够好的解决方案。

另一个解决方案可能是尝试为每个浏览器制作特定的CSS，并使用%/像素/EM中的一些垂直对齐对其进行微调：http://css-tricks.com/snippets/css/browser-specific-hacks/

对我来说唯一完美的解决方案是：

input[type=checkbox], input[type=radio] {vertical-align: -2px;margin: 0;padding: 0;}

今天在Chrome、Firefox、Opera、IE 7和8中进行了测试。示例：小提琴

简单地使用vertical-align: sub，正如pokrishka已经建议的那样。

小提琴

超文本标记语言代码：

<div class="checkboxes"><label for="check1">Test</label><input id="check1" type="checkbox"></input></div>

CSS代码：

.checkboxes input {vertical-align: sub;}

以下内容提供了跨浏览器（甚至IE9）的像素完美一致性：

这种方法非常合理，以至于显而易见：

1. 创建一个输入和一个标签。
2. 将它们显示为块，因此您可以随心所欲地浮动它们。
3. 将高度和line-高度设置为相同的值，以确保它们居中并垂直对齐。
4. 对于em测量，要计算元素的高度，浏览器必须知道这些元素的字体高度，并且它本身不能在em测量中设置。

这产生了一个全球适用的一般规则：

input, label {display:block;float:left;height:1em;line-height:1em;}

字体大小可根据表单、字段集或元素进行调整。

#myform input, #myform label {font-size:20px;}

在Mac、Windows、Iphone和Android上的最新Chrome、Safari和Firefox中进行了测试。和IE9。

此方法可能适用于不高于一行文本的所有输入类型。应用类型规则以适应。

现在所有现代浏览器都支持flexbox，这样的方法对我来说似乎更容易。

<style>label {display: flex;align-items: center;}input[type=radio], input[type=checkbox]{flex: none;}</style><form><div><label><input type="checkbox" /> Label text</label></div></form>

以下是完整的前缀版本演示：

label {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;}input[type=radio],input[type=checkbox] {-webkit-box-flex: 0;-webkit-flex: none;-ms-flex: none;flex: none;margin-right: 10px;}/* demo only (to show alignment) */form {max-width: 200px}

<form><label><input type="radio" checked>I am an aligned radio and label</label><label><input type="checkbox" checked>I am an aligned checkbox and label</label></form>

简单的解决方案：

<label style="display:block"><input style="vertical-align:middle" type="checkbox"><span  style="vertical-align:middle">Label</span></label>

测试在Chrome，火狐，IE9+，Safari，iOS9+

我发现唯一能将它们对齐的方法是使用绝对位置作为输入。玩输入的顶部变量得到了我想要的结果。

div {clear:    both;float:    none;position: relative;}
input {left:     5px;position: absolute;top:      3px;}
label {display:     block;margin-left: 20px;}

最后让我们来看看问题的根源

复选框使用图像呈现（可以通过CSS设置自定义）。这是FireFox中的一个（未选中的）复选框，用DOM检查器突出显示：

这是Chrome中相同的无样式复选框：

您可以看到边距（橙色）；填充不存在（将显示为绿色）。那么复选框右侧和底部的伪边距是什么？这些是用于复选框的图像的一部分。这就是为什么仅使用vertical-align: middle并不足够的原因，这就是跨浏览器问题的根源。

那么我们能做些什么呢？

一个显而易见的选择是——替换图像！幸运的是，可以通过CSS执行此操作，并将其替换为外部图像、Base64（CSS内）图像、CSS内svg或只是伪元素。这是一个健壮的（跨浏览器！）方法，这是从这个问题中窃取的此类调整的示例：

.checkbox-custom {opacity: 0;position: absolute;}.checkbox-custom,.checkbox-custom-label {display: inline-block;vertical-align: middle;margin: 5px;cursor: pointer;}.checkbox-custom + .checkbox-custom-label:before {content: '';display: inline-block;background: #fff;border-radius: 5px;border: 2px solid #ddd;vertical-align: middle;width: 10px;height: 10px;padding: 2px;margin-right: 10px;text-align: center;}.checkbox-custom:checked + .checkbox-custom-label:before {width: 1px;height: 5px;border: solid blue;border-width: 0 3px 3px 0;transform: rotate(45deg);-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);border-radius: 0px;margin: 0px 15px 5px 5px;}

<div><input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox"><label for="checkbox-1" class="checkbox-custom-label">First Choice</label></div><div><input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox"><label for="checkbox-2" class="checkbox-custom-label">Second Choice</label></div>

你可能想阅读一些关于这种样式的更深入的文章，比如一些列出的这里；它超出了这个答案的范围。

好的，还有没有自定义图像或伪元素的解决方案呢？

太长别读：看起来这不会工作，使用自定义复选框代替

首先，让我们注意到，如果在其他浏览器中，复选框图标中的伪边距是任意的，则没有一致的解决方案。要构建一个，我们必须探索现有浏览器中此类图像的解剖结构。

那么哪些浏览器在复选框中有伪边距呢？我已经检查过Chrome75、Vivaldi 2.5（基于Chromium）、FireFox 54（不要问为什么这么过时）、IE 11、Edge 42、Safari？？（借了一个，忘了检查版本）。只有Chrome和Vivaldi有这样的伪边距（我怀疑所有基于Chromium的浏览器也是如此，比如Opera）。

这些伪边距的大小是多少？要弄清楚这一点，可以使用缩放的复选框：

input {zoom: 10;box-shadow: 0 0 1px inset #999;}

<input type=checkbox>

my result is ~7% of width/height and hence 0.9-1.0px in absolute units. The accuracy may be questioned, though: try different values of zoom for the checkbox. In my tests in both Chrome and Vivaldi the relative size of the pseudo-margin is very different at zoom values 10, 20 and at values 11-19 (??):

scale seems to be more consistent:

input {transform: scale(10) translate(50%, 50%);box-shadow: 0 0 1px inset #999;}

<input type=checkbox>

so probably ~14% and 2px are the correct values.

Now that we know (?) the size of the pseudo-margin, let's note this is not enough. Are the sizes of the checkbox icons the same for all browsers? Alas! Here's what DOM inspector shows for unstyled checkboxes:

• FireFox: 13.3px
• Chromium-based: 12.8px for the whole thing, hence 12.8 (100% - 14%) = 11px for what is visually perceived as checkbox
• IE 11, Edge: 13px
• Safari: n/a (these should be compared on the same screen, I believe)

Now before we discuss any solutions or tricks, let's ask: what is a correct alignment? What are we trying to achieve? To certain point it's a matter of taste, but basically I can think of the following "nice" alignments' aspects:

text and checkbox on the same baseline (I deliberately don't adjust checkbox size here):

or have same middle line in terms of lowercase letters:

or same middle line in terms of capital letters (it's easier to see the difference for different font size):

and also we have to decide whether the size of the checkbox should be equal to the height of a lowercase letter, a capital letter or something else (bigger, smaller or between lowercase and capital).

For this discussion let's call an alignment nice if the checkbox is on the same baseline as the text and has the size of a capital letter (a highly arguable choice):

Now what tools do we have to:

1. adjust checkbox size
2. recognize Chromium with its pseudo-margined checkbox and set specific styles
3. adjust checkbox/label vertical alignment

?

1. Regarding the checkbox size adjustment: there are width, height, size, zoom, scale (have I missed something?). zoom and scale don't allow to set absolute size, so they may help only with adjusting to text size, not set cross-browser size (unless we can write browser-specific rules). size doesn't work with Chrome (did it work with old IE? anyway, it's not that interesting). width and height work in Chrome and other browsers, so we can set a common size, but again, in Chrome it sets the size of the whole image, not the checkbox itself. Note: it is minimum(width, height) which defines a checkbox's size (if width ≠ height, the area outside checkbox square is added to "pseudo-margin").

   An unfortunate thing is, the pseudo-margins in Chrome checkbox are not set to zero for any width and heights, as far as I can see.

2. I'm afraid there's no reliable CSS-only method these days.

3. Let's consider vertical alignment. vertical-align can't give consistent results when set to middle or baseline because of the Chrome's pseudo-margin, the only real option to get the same "coordinate system" for all the browsers is to align label and input to the top:

   

   (on the picture: vertical-align: top, bottom and bottom without box-shadow)

So what result do we get from this?

input[type="checkbox"] {height: 0.95em;width: 0.95em;}label, input {vertical-align: top;}

<label><input type="checkbox">label</label>

The snippet above works with Chrome (Chromium-based browsers), but other browsers require a smaller size of the checkbox. It seems to be impossible to adjust both the size and vertical alignment in a way that works around Chromium's checkbox image quirk. My final suggestion is: use custom checkboxes instead – and you'll avoid frustration :)

label {display: inline-block;padding-right: 10px;}input[type=checkbox] {position: relative;top: 2px;}

最简单的解决方案是

input {vertical-align: text-top;}