如何使用 Flexbox 將文字置於圖像上方？

使用Flexbox 在圖像上居中文字

簡介

簡介

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

1. Flexbox 是一個強大的佈局系統，允許開發人員僅使用 CSS 創建複雜的佈局。要使用 Flexbox 將文字置於圖像上居中，您可以按照以下步驟操作：
2. 在圖像和文字周圍建立一個 Flex 容器。
3. 將 Flex 方向設定為「列」以堆疊垂直排列項目。
4. 將align-items 屬性設為“center”，使文字垂直居中。
5. 使文字居中透過將 justify-content 屬性設為「center」來水平放置。
6. 使用position:absolute將文字絕對定位在影像容器內。
7. 使用 left 和 top 屬性將文字的中心與圖像的中心。

調整翻譯變換屬性以使文字在影像中準確居中image.

.flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.image {
  max-width: 100%;
  height: auto;
}

.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  text-align: center;
}

範例程式碼

<div class="flex-container">
  <img class="image lazy" src="/static/imghwm/default1.png" data-src="image.jpg" alt="Image">
  <div class="text">Center Text</div>
</div>

此程式碼片段建立一個垂直堆疊圖像和文字的Flex 容器。然後使用絕對定位和翻譯變換屬性將文字在圖像中居中。

使用CSS 定位的替代方法

雖然使用Flexbox 是居中文本的合適方法在圖像上，重要的是要注意絕對定位提供了同樣有效的解決方案。透過將圖像設定為文字的最近定位祖先，您可以將 left 和 top 屬性與變換屬性一起使用，以將文字精確地對齊在圖像上。 在您需要的情況下，此替代方法可能更可取不需要 Flexbox 提供的額外佈局彈性，或者如果您想保持與不完全支援 Flexbox 的舊版瀏覽器的向後相容性。

以上是如何使用 Flexbox 將文字置於圖像上方？的詳細內容。更多資訊請關注PHP中文網其他相關文章！