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

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

如果我们查看文档，则会阅读以下内容：

  

中间

     

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

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

使用简单的单词：对齐方式的参考不是div，而是div内的文本。

为了简化操作，请将line-height保留为默认值，然后定义一个font-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>

您可以清楚地看到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>

Answer 2

该元素将位于所需位置，他需要指定该元素

img {
  height: 96px;
  width: 120px;
  margin-left: calc(50% - 60px);
  vertical-align: middle;
}

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

Answer 3

您可以在div的顶部和底部添加相同的填充。这可以帮助您将图像对准中心。还有许多其他方法可以使项目居中对齐。 请浏览文章https://vanseodesign.com/css/vertical-centering/

div {
  border: 1px solid gray;
  padding: 20px 0;
}

img {
  height: 96px;
}

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

Answer 4

在DIV中垂直对齐图像的正确方法是什么？

您可以使用vertical-align: middle;

div {
  border: 1px solid gray;
}

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

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

或者您可以使用flexbox

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

img {
  height: 96px;
}

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