如何在不使用 Flexbox 的情況下使文字在圖像上居中？

在 Flexbox 中將文字置於影像上居中

Flexbox 是一種多功能係統，廣泛用於對齊內容佈局。然而，對於將文字在圖像上居中這項特定任務，CSS 定位屬性提供了更簡單、更有效的解決方案。

要實現文字在圖像上居中，不需要 Flexbox。請依照以下步驟操作：

1. 建立最近的定位祖先：將position:relative屬性分配給外部容器（本例中為.height-100vh）以建立最近的定位祖先用於絕對定位。
2. 對文字使用絕對定位： 給出文字容器（div.text）position：絕對屬性。這允許您相對於其父元素精確定位文字。
3. 水平和垂直對齊： 設定左：50％和頂部：50％以在文字內水平和垂直對齊文字父容器。
4. 精確居中：應用平移轉換（轉換： translate(-50%, -50%);) 來微調位置，佔元素寬度和高度的一半以實現準確居中。

這裡是利用這些概念的更新的 CSS 片段：

.height-100vh {
    height: 100vh;
    position: relative;
}

.text {
    position: absolute;  
    left: 50%;                        
    top: 50%;                         
    transform: translate(-50%, -50%); 
}

此方法可以有效地將文字居中於圖片之上，而不需要 Flexbox。它確保精確對齊並可跨瀏覽器工作，使其成為滿足您對齊需求的可靠解決方案。

以上是如何在不使用 Flexbox 的情況下使文字在圖像上居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！