3

看看这个页面。右侧的图像应在其 div 中居中。但如果仔细观察，顶部有一个大约 3 像素的小边框。如果你禁用overflow: hidden（通过萤火虫或 IE8 等效），它会伸出底部。

HTML是这样的：

<div class="small">
    <img src="/images/photos/Bedroom.jpg" alt="Bedroom" />
</div>
<div class="small">
    <img src="/images/photos/View.jpg" alt="View" />
</div>

而CSS，这个：

div.small
{
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    overflow:hidden;
    margin:5px;
    background-color: #C0C0C0;
    float:left;
}
div.small img
{
    vertical-align: middle;
    max-width:100px;
    max-height:100px;
    display: inline;
}

是什么导致了这个神秘的差距？我检查了边距和填充，它们似乎不是问题。

4

3 回答 3

5

注意：我不完全确定这种解释是否正确，但对我来说似乎是合理的。

首先，让我们看看规范对领先和半领先的说法：

由于 'line-height' 的值可能与内容区域的高度不同，因此渲染字形的上方和下方可能存在空间。内容高度与“行高”的使用值之间的差异称为行距。半领先称为半领先。

用户代理在内联框中垂直居中字形，在顶部和底部添加半前导。例如，如果一段文本的高度为“12px”且“行高”值为“14px”，则应添加 2pxs 的额外空间：字母上方 1px 和下方 1px。（这也适用于空盒子，就好像空盒子包含一个无限窄的字母一样。）

到目前为止，一切都很好。div.small因此，a中任何高度小于div.small's 的行框都line-height将与 .s 垂直居中div.small。现在让我们看一下属性vertical-align，特别是middle值：

将框的垂直中点与父框的基线加上父框 x 高度的一半对齐。

请注意，这不一定是线框的中心！确切的位置会随着您选择的字体和大小而改变。您可以通过放大和缩小文本来验证这一点：间隙的大小会发生变化。

如您所见，设置font-size: 0完全消除了差距。由于字体现在没有高度，行框的前导和半前导为 50px，基线垂直居中。为了渲染vertical-align: middle图像，浏览器将其中点设置在该基线，加上字体的 x 高度，现在为零。这给出了垂直居中的图像。

于 2009-09-02T16:11:10.383 回答
1

事实证明，设置font-size:0;div 解决了这个问题。但是，它仍然没有解释差距。有谁知道导致差距的原因吗？

于 2009-09-02T15:03:34.107 回答
0

我无法完全解释发生了什么，但是在处理了同样的问题之后，它似乎与我在 css 中声明字体属性的方式有关，例如

字体：11px/1.35em Verdana、Arial、Helvetica、无衬线；

= 显然对桌子不利。-- 我删除了该声明，改为使用 font-size:11px、line-height:px、font-family 等，它修复了差距！

于 2010-12-03T00:00:57.680 回答