垂直对齐复选框/标签对

我在堆栈溢出的这个问题上的帖子，但没有真正适合我。我有以下的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）。

有人请解释为什么浏览器/操作系统之间的这种差异发生（以及如何避免它们）？

更新

垂直对齐复选框与标签在Chrome的Mac下的破解如下：

input[type=checkbox] { 
    position: relative; 
    top: 1px; 
}

现在需要实现操作系统和浏览器的特定条件语句...

来源

2011-01-22 Andrej

-3

不知道浏览器为什么做不同的事情，他们总是这样做。就此而言，您是否尝试过display:table-cell;？

来源

2011-01-22 08:37:59 Elq

先给复选框顶部填充，这将降低其高度稍微居中他们。 – Amit 2011-01-23 00:51:18

+11

这不会帮助任何人没有具体参考原始代码和问题。添加`display：table-cell`到什么？！？！ – 2012-06-10 23:22:26

也许<input>上的默认边距/填充正在搞砸了吗？

来源

2011-01-23 22:12:04 Neil

另一种解决方案：

.checkbox{ 
vertical-align:-3px; 
}

注：这很简单。但如果标签的字体大小太大，并不总是可以正常工作。

来源

2011-04-27 08:57:19 Fmy

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

来源

2012-03-01 10:53:12

这是怎么了，我终于做到了：

label input[type=checkbox] { 
    margin-top: 5px; 
}

来源

2013-02-08 08:45:01 llundin

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

来源

2013-03-05 13:09:22 Anik

垂直对齐复选框/标签对

回答

相关问题