垂直对齐复选框/标签对[重复]
Posted
技术标签:
【中文标题】垂直对齐复选框/标签对[重复]【英文标题】：Vertical align checkbox / label pairs [duplicate] 【发布时间】：2011-06-13 13:49:42 【问题描述】：我浏览了 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;
完整的 html 代码是here。
复选框/标签对在 Mac OS X 下的 Safari (5.0.3) 和 Firefox (3.6.13) 中正确垂直居中。在 Chrome (Mac OS X) 上，复选框略微呈现在顶部。在 Windows 操作系统上，复选框和关联标签与底部对齐（在不同的浏览器中一致：Firefox、Safari、Chrome 和 Internet Explorer 8）。
谁能解释一下为什么浏览器/操作系统之间会出现这种差异（以及如何避免它们）？
更新
Mac下Chrome中将复选框与标签垂直对齐的hack如下：
input[type=checkbox]
position: relative;
top: 1px;
现在需要实现操作系统和浏览器特定的条件...
【问题讨论】：
【参考方案1】：另一种解决方案：
.checkbox
vertical-align:-3px;
注意：这很简单。但如果 label 的 font-size 太大，并不总是能正常工作。
【讨论】：
要使调整对字体大小敏感，您可以使用em 而不是px，例如vertical-align:-0.1em.【参考方案2】：
<input> 上的默认边距/填充可能搞砸了？
【讨论】：
【参考方案3】：这就是我最终做到的方式：
label input[type=checkbox]
margin-top: 5px;
【讨论】：
【参考方案4】：<!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>
【讨论】：
【参考方案5】：.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>
【讨论】：
【参考方案6】：不知道为什么浏览器会做不同的事情，他们总是这样做。至于这个，你试过display:table-cell;吗？
【讨论】：
尝试给复选框顶部填充，这将降低它们的高度以使它们居中。 如果没有具体参考原始代码和问题，这对任何人都没有帮助。将display: table-cell 添加到什么？！？！以上是关于垂直对齐复选框/标签对[重复]的主要内容，如果未能解决你的问题，请参考以下文章