CSS 中的垂直对齐实际上是如何工作的？

CSS 中的垂直对齐：了解细微差别

vertical-align 属性允许您将内联元素垂直放置在其父元素内。然而，除非您掌握了基本原则，否则它的行为可能是不可预测的。

内联元素和高度

垂直对齐仅影响内联元素。诸如

之类的元素和

<div>是块级的并且不受影响。对于没有固有行高的内联元素，例如

高度和垂直对齐

父元素的高度必须有一个静态值（即不是自动或百分比）。如果不指定高度，浏览器会根据内容计算高度，这可能会导致意想不到的结果。

定位内联元素

与text-align相反，适用于块级包含元素，垂直对齐应应用于要定位的内联元素。

浏览器差异

较旧的浏览器可能不会一致地支持垂直对齐。然而，现代浏览器可以很好地处理它，即使在非内联元素上使用也是如此。

示例：居中文本

例如，假设您有以下 HTML：

<div>

要将文本在 #inner 中垂直居中，请将 Vertical-align: middle 应用于 #header:

#header {
  display: inline-block;
  line-height: 1em;
  margin: 0;
  vertical-align: middle;
}

请注意，在此示例中，#inner 是一个内联块具有固定高度的元素。