时间戳

首页 > 解决方案 > 垂直居中对齐的图像更靠近底部而不是顶部

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

问题描述

在这个例子中，为什么图像没有完全呈现在封闭 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 中间的正确方法是什么？

标签： htmlcssvertical-alignment

解决方案

如果我们检查文档，我们将阅读以下内容：

中间

将元素的中间与基线加上父元素的x 高度的一半对齐。

因此，我们需要识别这些值以了解对齐方式。如果我们参考上图，我们可以清楚地看到基线，我们还可以看到 line-height（在我们的例子中定义为 100px）。您还可以注意到，中间不是 div 的中间，而是由不同值（font-family、font-size 等）定义的文本的中间。

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

为了更容易，让保留line-height默认值并定义 afont-size代替（行高将等于字体大小）：

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>

你可以清楚地看到middlediv 离中间很远，如果我们改变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>

推荐阅读