首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >垂直对齐复选框/标签对

垂直对齐复选框/标签对
EN

Stack Overflow用户
提问于 2011-01-22 13:41:06
回答 6查看 34.5K关注 0票数 22

我在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中垂直对齐标签的方法如下所示:

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

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

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2011-01-22 16:38:00

不知道为什么浏览器会做不同的事情,他们总是这样做。到目前为止,你有没有尝试过display:table-cell;

票数 -3
EN

Stack Overflow用户

发布于 2011-04-27 16:57:19

另一种解决方案:

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

注意:这很简单。但是,如果标签的字体太大,并不总是工作得很好。

票数 14
EN

Stack Overflow用户

发布于 2011-01-24 06:12:04

也许<input>上的默认页边距/填充把事情搞乱了?

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4766387

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档