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

How to align checkboxes and their labels consistently cross-browsers

提问by One Crayon

This is one of the minor CSS problems that plagues me constantly. How do folks around Stack Overflow vertically align checkboxesand their labelsconsistently cross-browser? Whenever I align them correctly in Safari (usually using vertical-align: baselineon the input), they're completely off in Firefox and IE. Fix it in Firefox, and Safari and IE are inevitably messed up. I waste time on this every time I code a form.

这是一直困扰着我的次要 CSS 问题之一。Stack Overflow 周围的人如何垂直对齐checkboxes并labels始终跨浏览器？每当我在 Safari 中正确对齐它们（通常vertical-align: baseline在 上使用input）时，它们在 Firefox 和 IE 中完全关闭。在Firefox中修复，Safari和IE难免一团糟。每次我编写表单时，我都在浪费时间。

Here's the standard code that I work with:

这是我使用的标准代码：

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

I usually use Eric Meyer's reset, so form elements are relatively clean of overrides. Looking forward to any tips or tricks that you have to offer!

我通常使用 Eric Meyer 的重置，因此表单元素的覆盖相对干净。期待您提供的任何提示或技巧！

采纳答案by One Crayon

After over an hour of tweaking, testing, and trying different styles of markup, I think I may have a decent solution. The requirements for this particular project were:

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

1. Inputs must be on their own line.
2. Checkbox inputs need to align vertically with the label text similarly (if not identically) across all browsers.
3. If the label text wraps, it needs to be indented (so no wrapping down underneath the checkbox).

1. 输入必须在他们自己的行上。
2. 复选框输入需要在所有浏览器中类似地（如果不完全相同）与标签文本垂直对齐。
3. 如果标签文本换行，则需要缩进（因此不要在复选框下方换行）。

Before I get into any explanation, I'll just give you the code:

在我进入任何解释之前，我会给你代码：

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>

Here is the working example in JSFiddle.

这是JSFiddle 中的工作示例。

This code assumes that you're using a reset like Eric Meyer's that doesn't override form input margins and padding (hence putting margin and padding resets in the input CSS). Obviously in a live environment you'll probably be nesting/overriding stuff to support other input elements, but I wanted to keep things simple.

此代码假定您使用的是像 Eric Meyer 一样的重置，它不会覆盖表单输入边距和填充（因此在输入 CSS 中放置边距和填充重置）。显然，在实时环境中，您可能会嵌套/覆盖内容以支持其他输入元素，但我想让事情保持简单。

Things to note:

注意事项：

• The *overflowdeclaration is an inline IE hack (the star-property hack). Both IE 6 and 7 will notice it, but Safari and Firefox will properly ignore it. I think it might be valid CSS, but you're still better off with conditional comments; just used it for simplicity.
• As best I can tell, the only vertical-alignstatement that was consistent across browsers was vertical-align: bottom. Setting this and then relatively positioning upwards behaved almost identically in Safari, Firefox and IE with only a pixel or two of discrepancy.
• The major problem in working with alignment is that IE sticks a bunch of mysterious space around input elements. It isn't padding or margin, and it's damned persistent. Setting a width and height on the checkbox and then overflow: hiddenfor some reason cuts off the extra space and allows IE's positioning to act very similarly to Safari and Firefox.
• Depending on your text sizing, you'll no doubt need to adjust the relative positioning, width, height, and so forth to get things looking right.

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

Hope this helps someone else! I haven't tried this specific technique on any projects other than the one I was working on this morning, so definitely pipe up if you find something that works more consistently.

希望这对其他人有帮助！除了我今天早上正在做的项目之外，我还没有在任何项目上尝试过这种特定的技术，所以如果你发现一些更一致的工作，一定要加油。

回答by Nathan Bowers

Sometimes vertical-align needs two inline (span, label, input, etc...) elements next to each other to work properly. The following checkboxes are properly vertically centered in IE, Safari, FF, and Chrome, even if the text size is very small or large.

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

They all float next to each other on the same line, but the nowrap means that the whole label text always stays next to the checkbox.

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

The downside is the extra meaningless SPAN tags.

缺点是额外的无意义的 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 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>

Now, if you had a very long label text that neededto wrap without wrapping under the checkbox, you'd use padding and negative text indent on the label elements:

现在，如果您有一个很长的标签文本需要在复选框下换行而不换行，您可以在标签元素上使用填充和负文本缩进：

.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 for="x"><input type="checkbox" id="x" /> <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 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>

回答by Nathan Bowers

Working off of One Crayon's solution, I have something that works for me and is simpler:

使用One Crayon 的解决方案，我有一些对我有用并且更简单的东西：

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

Renders pixel-for-pixel the same in Safari (whose baseline I trust) and both Firefox and IE7 check out as good. It also works for various label font sizes, big and small. Now, for fixing IE's baseline on selects and inputs...

在 Safari（我信任其基线）中逐像素呈现相同的像素，并且 Firefox 和 IE7 检查结果都很好。它也适用于各种标签字体大小，无论大小。现在，为了修复 IE 在选择和输入上的基线......

---

---

Update:(Third-Party Edit)

更新：（第三方编辑）

The proper bottomposition depends on font-family and font-size! I found using bottom: .08em;for checkbox & radio elements is a good general value. I tested it in Chrome/Firefox/IE11 in windows with Arial & Calibri fonts using several small/mid/large font-sizes.

正确的bottom位置取决于 font-family 和 font-size！我发现bottom: .08em;用于复选框和单选元素是一个很好的通用值。我在 Windows 中的 Chrome/Firefox/IE11 中使用 Arial 和 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>

回答by Frank Schwieterman

One easy thing that seems to work well is to apply a adjust the vertical position of the checkbox with vertical-align. It will still be vary across browsers, but the solution is uncomplicated.

一件似乎很有效的简单事情是使用vertical-align应用调整复选框的垂直位置。它仍然会因浏览器而异，但解决方案并不复杂。

input {
    vertical-align: -2px;
}

Reference

参考

回答by digitalsanctum

try vertical-align: middle

尝试 vertical-align: middle

also your code seems like it should be:

您的代码似乎也应该是：

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

回答by Waleed Eissa

Try my solution, I tried it in IE 6, FF2 and Chrome and it renders pixel by pixel in all the three browsers.

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

回答by Buzogany Laszlo

The only perfectly working solution for me is:

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

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

Tested today in Chrome, Firefox, Opera, IE 7 and 8. Example: Fiddle

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

回答by Patrick

I have not completely tested my solution, but it seems to work great.

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

My HTML is simply:

我的 HTML 很简单：

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

I then set all checkboxes to 24pxfor both height and width. To make the text aligned I make the label's line-heightalso 24pxand assign vertical-align: top;like so:

然后我将所有复选框24px都设置为高度和宽度。为了使文本对齐我做标签的line-height同时24px，并分配vertical-align: top;如下所示：

EDIT:After IE testing I added vertical-align: bottom;to the input and changed the label's CSS. You may find you need a conditional IE css case to sort out padding - but the text and box are inline.

编辑：在 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>

If anyone finds that this doesn't work, please kindly let me know. Here is it in action (in Chrome and IE - apologies as screenshots were taken on retina and using parallels for IE):

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

回答by Bryan A

I usually use line height in order to adjust the vertical position of my static text:

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

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>

Hope that helps.

希望有帮助。

回答by Carlo Pires

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

The trick is to use vertical-align only in table cells or inline-block if using label tag.

诀窍是如果使用标签标签，则仅在表格单元格或内联块中使用垂直对齐。