Question

看看this page。右边的图像应该在它们的div中居中。但如果仔细观察，顶部有一个约3像素的小边框。如果你禁用overflow: hidden（通过firebug或等效的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;
}

造成这种神秘差距的原因是什么？我检查了边距和填充，它们似乎不是问题。

Answer 1

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

首先，让我们看看规范在leading and half-leading上的内容：

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

用户代理在内联框中垂直居中使用字形，在顶部和底部添加半个引导。例如，如果一段文本是'12px'高而'line-height'值是'14px'，则应添加2pxs的额外空间：1px以上和1px以下的字母。（这也适用于空盒子，好像空盒子包含一个无限窄的字母。）

到目前为止，这么好。因此，div.small中高度小于div.small的{{1}}的任何行框都将与line-height垂直居中。现在让我们看一下the vertical-align property，特别是div.small值：

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

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

正如您所发现的那样，设置middle会完全消除差距。由于字体现在没有高度，因此线框的前导和半导程为50px，基线垂直居中。为了呈现font-size: 0图像，浏览器将其中点设置在该基线处，加上字体的x高度，现在为零。这给出了一个垂直居中的图像。

Answer 2

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

Answer 3

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

font：11px / 1.35em Verdana，Arial，Helvetica，sans-serif;

=表显然不好。 - 我删除了那个声明，而是使用了font-size：11px，line-height：px，font-family等，它修复了这个空白！

为什么当我将图像置于具有行高的div中时，顶部会出现3px的间隙？

3 个答案: