‘vertical-align’屬性如何定位內嵌元素？

了解 Vertical-Align 屬性

使用垂直對齊時，理解「vertical-align」屬性背後的原理至關重要。此屬性指示內聯元素如何相對於其周圍文字或元素垂直定位。

內聯元素要求

只能應用「vertical-align」屬性內聯元素，例如 span、img 和 a。內嵌元素在文字流中自然流動。

行高注意事項

對於通常不指定行高的元素，例如圖像或圖標，必須設定行高才能正確垂直對齊。

高度值要求

應用「vertical-align」的元素的高度應該有一個靜態值（不是百分比或自動），確保垂直對齊一致。

包含元素與目標元素

「vertical-align」屬性可以應用於包含元素和目標元素它應該影響的目標元素。但是，首選將其應用於包含元素，因為它會影響該容器內的所有內聯元素。

理解行框

「vertical-align」屬性對齊元素的垂直中心與周圍文字的行框。行框包含一行文本，而不是容器的整個高度。

JsFiddle 示範

提供的 JsFiddle 範例說明了垂直對齊的原理。外部容器的高度設定為 200px，內部元素設定為 inline-block，高度也設定為 200px。內部元素內的標題設定為「vertical-align: middle;」。

預期結果是標題在內部元素內垂直居中。但是，由於標題包含多行文本，因此垂直對齊方式應用於各個行框，而不是整個高度。因此，標頭僅在容器內部分對齊。

以上是‘vertical-align’屬性如何定位內嵌元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！