CSS如何讓文字在圖片底下

在CSS中，您可以使用相對定位（relative positioning）或***定位（absolute positioning）來讓文字在圖片底下，相對定位是相對于其正常位置進(jìn)行定位，而***定位則是相對于瀏覽器窗口進(jìn)行定位。

下面是一個(gè)使用相對定位的例子：

HTML代碼：

<div class="image-container">
  <img src="image.jpg" alt="Image">
  <p class="image-text">這是一段文字，將在圖片下方顯示。</p>
</div>

CSS代碼：

.image-container {
  position: relative;
  width: 300px;
  height: 200px;
}
.image-container img {
  width: 100%;
  height: 100%;
}
.image-text {
  position: relative;
  top: 10px;
  left: 0;
  width: 100%;
  text-align: center;
}

在這個(gè)例子中，.image-container元素被設(shè)置為相對定位，這意味著它可以包含***定位的元素。.image-text元素也被設(shè)置為相對定位，并且它的top屬性設(shè)置為10px，這意味著它將在圖片下方10px的位置顯示，您還可以調(diào)整其他CSS屬性來進(jìn)一步自定義文字的樣式和位置。