html - 垂直居中对齐的图像比顶部更靠近底部

Question

在这个例子中，为什么图像没有准确地呈现在封闭的 DIV 的中间？

div {
  border: 1px solid gray;
  line-height: 100px;
}

img {
  height: 96px;
  vertical-align: middle;
}

<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>

如果我们运行这个例子，我们会看到图像比上边框更靠近底部边框。

为什么会这样？

在 DIV 中垂直对齐图像以使其恰好位于 DIV 垂直中间的正确方法是什么？

Answer 1

如果我们查看文档，我们会读到:

middle

Aligns the middle of the element with the baseline plus half the x-height of the parent.

因此我们需要确定这些值以了解对齐方式。如果我们引用 to the above figure我们可以清楚地看到基线，我们也可以看到行高(在我们的例子中由 100px 定义)。您还可以注意到中间不是 div 的中间，而是由不同值(字体系列、字体大小等)定义的文本的中间。

用简单的话来说:对齐的引用不是 div，而是 div 内的文本。

为了更容易，让 line-height 保持默认值并定义一个 font-size 代替(line-height 将等于字体-尺寸):

div {
  border: 1px solid gray;
  font-size:50px;
}

img {
  height: 46px;
  vertical-align: middle;
}

<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>
with a different font-family
<div style="font-family:arial">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>

你可以清楚地看到 middle 离 div 的中间很远，如果我们改变 font-family 对齐方式也会改变。

---

为了更好地对齐包含文本的 div 中的内容，例如依赖 flexbox:

div {
  border: 1px solid gray;
  font-size:50px;
  display:flex;
  align-items:center;
}

img {
  height: 46px;
}

<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>