為什麼 `vertical-align: middle` 不總是垂直居中內聯內容？

垂直對齊的意外後果：內容未對齊

在網頁設計領域，垂直對齊在垂直定位元素方面起著至關重要的作用。但是，在某些情況下，預期的對齊方式未能實現，導致內容未對齊。

考慮以下範例：

p {
  background: yellow
}

span {
  display: inline-block;
  vertical-align: middle;
  height: 50px;
  background: pink;
}

<p>Hello <span>What in the</span> World?</p>

在這種情況下，我們期望span 元素在其周圍的段落中垂直對齊。然而，在對跨度應用vertical-align: middle時，我們遇到了意想不到的結果：整個段落（不包括跨度的內容）變得垂直對齊。

為什麼會發生這種錯位？這不是一個錯誤，而是垂直對齊的預期行為。 Vertical-align 指定元素的垂直對齊方式，在這種情況下，跨度在段落內居中。 Span 內容沒有對齊表示瀏覽器正在根據其自然高度渲染內容，該高度小於 Span 本身的高度。

要消除未對齊，我們可以調整垂直對齊方式透過修改其垂直對齊方式來調整跨度的內容：

span {
  position: relative;
  vertical-align: middle;
  top: 50%;
  transform: translateY(-50%);
}

以上是為什麼 `vertical-align: middle` 不總是垂直居中內聯內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！