Html 垂直对齐复选框/标签对
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4766387/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical align checkbox / label pairs
提问by Andrej
I go through the posts on this issue on Stack Overflow, but nothing really works for me. I have the following CSS code to vertically align checkbox / label pair:
我在 Stack Overflow 上浏览了关于这个问题的帖子，但没有什么对我有用。我有以下 CSS 代码来垂直对齐复选框/标签对：
body {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 11px;
margin: 0;
padding: 0;
}
fieldset {
line-height: 100%;
}
label {
display: inline-block;
vertical-align: baseline;
}
The full HTML code is here.
完整的 HTML 代码在这里。
Checkbox / label pairs are vertically centered correctly in Safari (5.0.3) and Firefox (3.6.13) under Mac OS X. On Chrome (Mac OS X) checkboxes are rendered slightly to the top. On Windows OS checkboxes and associate labels are aligned to the bottom (consistently across different browsers: Firefox, Safari, Chrome, and Internet Explorer 8).
复选框/标签对在 Mac OS X 下的 Safari (5.0.3) 和 Firefox (3.6.13) 中正确垂直居中。在 Chrome (Mac OS X) 上，复选框略微呈现到顶部。在 Windows 操作系统上，复选框和关联标签与底部对齐（在不同浏览器中保持一致：Firefox、Safari、Chrome 和 Internet Explorer 8）。
Could somebody please explain me why this differences between browsers / OS happens (and also how to avoid them)?
有人可以解释一下为什么浏览器/操作系统之间会发生这种差异（以及如何避免它们）？
Update
更新
The hack to vertically align checkbox with label in Chrome under Mac is as follows:
在 Mac 下的 Chrome 中将复选框与标签垂直对齐的 hack 如下：
input[type=checkbox] {
position: relative;
top: 1px;
}
Now need to implement OS and browser specific conditionals...
现在需要实现操作系统和浏览器特定的条件......
采纳答案by Elq
No idea why the browsers do different things, they just always do. As far as this, did you try display:table-cell;?
不知道为什么浏览器会做不同的事情，他们总是这样做。至于这个，你试过display:table-cell;吗？
回答by Fmy
another solution:
另一种解决方案：
.checkbox{
vertical-align:-3px;
}
note: it's simple. But not always works fine if the font-size of label is too big.
注意：这很简单。但如果标签的字体大小太大，则并非总是能正常工作。
回答by llundin
This is how I finally did it:
这就是我最终做到的：
label input[type=checkbox] {
margin-top: 5px;
}
回答by Neil
Maybe the default margins/padding on the <input>are messing things up?
也许默认的边距/填充把<input>事情搞砸了？
回答by Anik
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="shortcut icon" href="../images/favicon.ico" />
<style>
.GlobalEntityComboBox {
font-family: Verdana;
font-size: 11px;
padding: 0px;
margin: 0px;
background-color: lightgrey;
border: 1px solid grey;
width: 190px;
}
.GlobalEntityComboBox li {
list-style-type: none;
line-height: 24px;
padding-left: 4px;
padding-right: 4px;
margin-top: 1px;
margin-bottom: 1px;
}
.GlobalEntityComboBox li.checked {
background-color: lightgreen;
border-top: 1px solid green;
border-bottom: 1px solid green;
}
.GlobalEntityComboBox input {
margin: 0px;
padding: 0px;
margin-right: 4px;
vertical-align: middle;
}
.GlobalEntityComboBox span {
vertical-align: middle;
}
</style>
</head>
<body>
<ul class="GlobalEntityComboBox">
<li class="checked"><input type="checkbox" checked/><span>All Servers</span></li>
<li class="checked"><input type="checkbox" checked/><span>Server 1</span></li>
<li class="checked"><input type="checkbox" checked/><span>Server 2</span></li>
<li><input type="checkbox"/><span>Server 3</span></li>
</ul>
</body>
</html>
回答by Phil Hymanson
.flcheck-wrapper
{ overflow:hidden;
margin:5px 0;
}
.flcheck-wrapper p
{ font-size:12px;
display:inline;
float:left;
line-height:20px;
margin:0 0 0 10px;
}
.flcheck-wrapper input[type="checkbox"],
.flcheck-wrapper input[type="radio"]
{ display:inline;
float:left;
margin:0 !imortant;
line-height:20px;
height:20px;
}
<div class="flcheck-wrapper">
<input type="radio" name="foo" value="true" checked="checked" />
<p>Some kind of text</p>
</div>
<div class="flcheck-wrapper">
<input type="radio" name="foo" value="false" />
<p>Some kind of text</p>
</div>
