如何使用 CSS 定位而不是 Flexbox 使文字在圖像上居中？

使用Flexbox 將文字在圖像上居中

在本指南中，我們將探索使用純CSS 定位屬性而不是Flexbox 將文字在圖像上居中的替代方法。

定位屬性：

.height-100vh {
  position: relative;
}

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

1. 建立相對父級：我們在高度為100vh類的容器元素上設定position:relative，以建立絕對定位的定位祖先。
2. 絕對定位文字：我們在.text上使用position:absolute類別將其定位在正常文件流之外。
3. 水平對齊：透過設定 left: 50%，我們透過從容器的左邊緣測量文字來水平居中文字。
4. 垂直對齊： 類似地，頂部：50% 透過從頂部邊緣測量文字垂直居中
5. 精確居中：為了使文字精確居中，我們應用變換：translate(-50%, -50%)。這會將文字在兩個方向上平移 -50%，最終將其移動到中心。

用法範例：

<section class="height-100vh center-aligned">
  <img class="background-image" src="image.jpg" />
  <div class="text">SOME TEXT</div>
</section>

透過實現這些定位屬性，您可以有效地居中無需依賴 Flexbox 即可在圖片上顯示文字。這種方法為這種常見的佈局任務提供了一個簡單直接的解決方案。

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