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

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

您可以在 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 2

在 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>

Answer 3

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

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 代替（行高将等于字体大小）：

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 4

元素会在需要的地方，他需要指定

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>

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

Vertically middle-aligned image is closer to the bottom than the top

html

css

vertical-alignment