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

Question

这是我不断困扰我的一个小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的重置，因此表单元素相对干净的覆盖。期待您提供的任何提示或技巧！

Answer 1

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

输入必须在各自的行上。
复选框输入需要在所有浏览器中与标签文本垂直对齐（如果不相同）。
如果标签文本换行，则需要缩进（因此不要在复选框下面进行包装）。

在我做出任何解释之前，我会给你代码：

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非常相似。
根据您的文字大小调整，您无疑需要调整相对位置，宽度，高度等，以使事情看起来正确。

希望这有助于其他人！我没有在我今天早上工作的任何项目上尝试过这种特定的技术，所以如果你找到一些更有效的东西，那么肯定会搞定。

Answer 2

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

Answer 3

使用One Crayon's solution，我有一些对我有用的东西，更简单：

.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！我发现使用 bottom: .08em; 作为复选框＆amp;无线电元素是一个很好的一般价值。我在带有Arial＆amp ;;的Windows中的Chrome / Firefox / IE11中进行了测试Calibri字体使用几种小/中/大字体。

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

Answer 4

一个似乎运作良好的简单方法是使用vertical-align应用复选框的垂直位置。它仍然会因浏览器而异，但解决方案并不复杂。

input {
    vertical-align: -2px;
}

Reference

Answer 5

尝试vertical-align: middle

你的代码似乎应该是：

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

Answer 6

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

Answer 7

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

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

今天在Chrome，Firefox，Opera，IE 7和8中进行了测试。示例： Fiddle

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

希望有所帮助。

Answer 9

我还没有完全测试我的解决方案，但它看起来效果很好。

我的HTML很简单：

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

如果有人发现这不起作用，请告诉我。这是它的实际应用（在Chrome和IE中 - 道歉，因为截图是在视网膜上进行的，并且使用了IE的并行）：

screenshot of checkboxes: Chrome screenshot of checkboxes: IE

Answer 10

我认为这是最简单的方式

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

<强> Fiddle

Answer 11

这对我很有用：

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>

Answer 12

现在所有现代浏览器都支持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>

这是完整的前缀版演示：

＆＃13;

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
}

＆＃13;

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

＆＃13;

Answer 13

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

我发现vertical-align: sub使得复选框在Chrome，Firefox和Opera中看起来非常合适。无法检查Safari因为我没有MacOS而IE10稍微关闭，但我发现它对我来说是足够好的解决方案。

另一种解决方案可能是尝试为每个浏览器制作特定的CSS，并使用％/ pixels / EMs中的一些vertical-align对其进行微调： http://css-tricks.com/snippets/css/browser-specific-hacks/

Answer 14

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

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

Answer 15

选择400+ upvotes的答案对我来说在Chrome 28 OSX中不起作用，可能是因为它没有在OSX中测试过，或者在2008年回答这个问题的时候它确实有效。

时代已经改变，现在可以使用新的CSS3解决方案。我的解决方案使用pseudoelements创建自定义复选框。因此，规定（利弊，无论你如何看待）如下：

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

您的HTML：

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

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

此解决方案隐藏了复选框，并将伪元素添加并设置为标签以创建可见复选框。由于标签与隐藏的复选框相关联，因此输入字段仍会更新，并且值将与表单一起提交。

jsFiddle：http://jsfiddle.net/SgXYY/6/

如果您感兴趣，请点击我的单选按钮：http://jsfiddle.net/DtKrV/2/

希望有人觉得这很有用！

Answer 16

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

请检查以下示例代码：

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

Answer 17

只是想在标签上添加关于'for'属性的讨论（稍微偏离主题）：

请提供，即使没有必要，因为从javascript使用非常方便：

var label = ...
var input = document.getElementById(label.htmlFor);

这比试图弄清楚标签是否有输入嵌套，或者输入是在标签之前，还是在......等之后要方便得多。而且它永远不会伤害它......所以。

只需2美分。

Answer 18

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

Answer 19

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

诀窍是只在表格单元格中使用vertical-align，如果使用label标签，则使用inline-block。

Answer 20

如果您使用的是Twitter Bootstrap，则可以使用checkbox上的<label>课程：

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

Answer 21

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

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

这是Chrome中相同的未设置样式的复选框：

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

那我们该怎么办？

一个明显的选择是–替换图像！幸运的是，可以通过CSS做到这一点，并将其替换为外部图像，base64（in-CSS）图像，in-CSS svg或仅是伪元素。这是一种健壮的（跨浏览器！）方法，下面是从this question窃取此类调整的示例：

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

您可能想阅读一些有关这种样式的更深入的文章，例如列出的here；这超出了这个答案的范围。

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

TL; DR：看来这行不通，请改用自定义复选框

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

那么哪些浏览器的复选框中有伪边距？我已经检查了Chrome 75，Vivaldi 2.5（基于铬），FireFox 54（不要问为什么这样过时），IE 11，Edge 42，Safari ?? （借用一分钟，忘了签出版本）。只有Chrome和Vivaldi才有这种伪利润（我怀疑所有基于Chromium的浏览器也一样，例如Opera）。

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

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

<input type=checkbox>

我的结果是宽/高的7％，因此以绝对单位为0.9-1.0px。但是，准确性可能会受到质疑：请为复选框尝试使用不同的zoom值。在我在Chrome和Vivaldi上进行的测试中，伪边距的相对大小在zoom值10、20和值11-19（??）处非常不同：

scale似乎更加一致：

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

<input type=checkbox>

所以正确的值大概是14％和2px。

现在我们知道（？）伪边距的大小，请注意，这还不够。所有浏览器的复选框图标的大小都一样吗？唉!这是DOM检查器显示的无样式复选框的内容：

FireFox： 13.3px
基于铬：整件事 12.8px ，因此对于可视为复选框的内容，则为12.8（100％-14％）= 11px
IE 11，Edge： 13px
Safari：不适用（我认为这些应该在同一屏幕上进行比较）

现在，在讨论任何解决方案或技巧之前，让我们问：什么是正确对齐方式？我们要达到什么目标？在某种程度上，这是一个品味问题，但基本上我可以想到以下“不错”的对齐方式：

文本和复选框位于同一基线（我故意不在此处调整复选框大小）：

或在小写字母方面具有相同的中间行：

或以大写字母表示相同的中间行（更容易看到不同字体大小的差异）：

我们还必须确定复选框的大小是否应等于小写字母，大写字母或其他内容（更大，更小或介于小写和大写之间）的高度。

在此讨论中，如果复选框与文本位于同一基线上并且具有大写字母的大小（一个极具争议的选择），我们就称其为对齐方式很好。

现在我们需要什么工具：

调整复选框大小
使用伪边距复选框识别Chromium并设置特定样式
调整复选框/标签的垂直对齐方式

？

关于checkbox size adjustment：有width，height，size，zoom，scale（我错过了什么吗？？）。 zoom和scale不允许设置绝对大小，因此它们可能仅有助于调整文本大小，而不能设置跨浏览器大小（除非我们可以编写特定于浏览器的规则）。 size不适用于Chrome（它是否可以与旧版IE一起使用？无论如何，它并不那么有趣）。 width和height可以在Chrome和其他浏览器中使用，因此我们可以设置一个通用尺寸，但是在Chrome中，它可以设置整个图像的尺寸，而不是复选框本身。注意：它是最小（宽度，高度），它定义了复选框的大小（如果宽度≠高度，则复选框正方形外部的区域将添加到“伪边距”中。）

不幸的是，就我所知，对于任何宽度和高度，Chrome浏览器中的伪边距都未设置为零。
这些天，恐怕没有可靠的CSS-only method。
让我们考虑垂直对齐。由于Chrome的伪边距，vertical-align设置为middle或baseline时无法给出一致的结果，为所有浏览器获得相同“坐标系”的唯一真实选择是对齐标签并输入到top：

（在图片上：vertical-align：顶部，底部和底部无框阴影）

那我们从中得到什么结果？

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

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

上面的代码段适用于Chrome（基于铬的浏览器），但其他浏览器需要较小的复选框。似乎无法以Chromium复选框图像怪异的方式调整尺寸和垂直对齐方式。 我的最终建议是：改用自定义复选框-这样可以避免感到沮丧：）

Answer 22

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

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

确保高度与（blocklevel）的行高相同。

Answer 23

＆＃13;

input[type=checkbox]
{
    vertical-align: middle;
}

＆＃13;

<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>

＆＃13;

Answer 24

所以我知道这已经被多次回答了，但我觉得我有一种比已经提供的更优雅的解决方案。不仅有一个优雅的解决方案，还有两个独立的解决方案可以让您感到满意。话虽如此，您需要知道和看到的所有内容都包含在2个JS Fiddle中，并附有评论。

解决方案＃1依赖于原生＆＃34; Checkbox＆＃34;给定的浏览器，但有一个扭曲...它包含在一个div更容易定位跨浏览器，溢出：隐藏切断多余的1px拉伸复选框（这是你不能看到丑陋的边框FF）

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

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

解决方案＃2使用＆＃34; Checkbox Toggle Hack＆＃34;切换已在浏览器中正确定位的DIV的CSS状态，并使用简单的sprite设置复选框未选中和已检查状态。所需要的只是使用Checkbox Toggle Hack调整背景位置。在我看来，这是一个更优雅的解决方案，因为你可以更好地控制你的复选框和无线电，可以保证它们在浏览器中看起来一样。

简单HTML：（按照链接查看带注释的CSS，代码块是为了满足StackOverflow） http://jsfiddle.net/Sx5M2/

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

如果有人不同意这些方法，请给我发表评论，我很乐意听到一些关于为什么其他人没有遇到这些解决方案的反馈，或者如果他们有，为什么我在这里看不到有关他们的答案？如果有人看到其中一种方法失败，那么也很高兴看到这些，但是这些已经在最新的浏览器中进行了测试，并且依赖于相当古老的HTML / CSS方法，并且我已经看到了它的普遍性。

Answer 25

仅使用vertical-align: sub，已建议pokrishka。

Fiddle

HTML代码：

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

CSS代码：

.checkboxes input {
    vertical-align: sub;
}

Answer 26

我通常会选中一个未标记的复选框，然后将其“标签”作为单独的元素。这是一个痛苦，但是复选框和它们的标签之间的显示方式有很多跨浏览器的区别（正如你所注意到的），这是我能够接近控制一切外观的唯一方式。

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

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

Answer 27

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

HTML：

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

上面的代码会将您的列表项目放在三个列表中，只需更改宽度即可。

Answer 28

简单的解决方案：

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

在Chrome，Firefox，IE9 +，Safari，iOS 9 + 中进行了测试

Answer 29

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

无论如何，你应该将表单控件组合在一起放在他们自己的fieldsets中，在这里，它会播放wrappa。 set input / label do display：block，input float left，label float right，设置宽度，用左/右边距控制间距，相应地对齐标签文本。

所以

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
}

您可能需要在两者上设置边框，轮廓和线高，以及跨浏览器/媒体解决方案。

Answer 30

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中工作。

Answer 31

谢谢！这也一直让我疯狂。

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

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，这可能解释了一些差异，但这似乎对我有用。

Answer 32

以下内容提供了跨浏览器的像素完美一致性，即使是IE9：

这种做法非常明智，显而易见：

创建输入和标签。
将它们显示为块，以便您可以随意浮动它们。
将高度和线高设置为相同的值，以确保它们居中并垂直对齐。
对于 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。

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

Answer 33

我发现我可以将它们排列起来的唯一方法是使用绝对位置作为输入。玩输入的top变量得到了我想要的结果。

div {
  clear:    both;
  float:    none;
  position: relative;
}

input {
  left:     5px;
  position: absolute;
  top:      3px;
}

label {
  display:     block;
  margin-left: 20px;
}

Answer 34

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

Answer 35

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

.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的后期版本中正确对齐

Answer 36

这不是解决问题的最佳方法

vertical-align: middle

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

Answer 37

试试这段代码

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

Answer 38

为了与浏览器中的表单字段保持一致，我们使用： box-sizing：border-box

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

Answer 39

我发现了一种方法可以在几乎所有浏览器中提供相同的结果。至少是最新的浏览器。它适用于Firefox，Chrome，Safari，Opera。在IE中它几乎看起来几乎没有应用于输入或标签的规则（即，它仍然具有几个像素低于输入的标签），所以我认为它是可以原谅的。 / p>

HTML

<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 */
}

Answer 40

input {
    margin: 0;
}

实际上就是这个伎俩

如何一致地跨浏览器对齐复选框及其标签

40 个答案:

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

那我们该怎么办？

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