如何在 CSS 中垂直對齊內聯/內聯塊元素？

在CSS 中垂直對齊內聯/內聯塊元素

在建立垂直對齊佈局時，了解CSS 版面中的垂直對齊至關重要。儘管應用了適當的垂直對齊屬性，元素可能會持續不可預測地移動。

以提供的範例為例：

<div>
  <a></a><a></a>
  <span>Some text</span>
</div>

這裡，儘管應用了「垂直對齊」和「垂直對齊」屬性，但 span 元素仍然被推下。 ：中間;”

解決這個問題的關鍵在於理解「vertical-align」適用於要對齊的元素，而不是其父容器。要垂直對齊「div」元素的子元素，請使用CSS 規則：

div > * {
    vertical-align:middle;  // Align children to middle of line
}

透過此更改，「div」元素的子元素將在父div 內垂直對齊。 🎜>

注意：

「vertical-align」相對於目前文字行對齊，而不是容器div的完整高度。 height」屬性而非其高度。有關實際範例，請參閱原​​始問題中提供的jsfiddle 連結。

以上是如何在 CSS 中垂直對齊內聯/內聯塊元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！