在網(wǎng)頁設(shè)計中，我們經(jīng)常需要在圖片下方插入文字，以提供圖片的描述、標題或其他相關(guān)信息，使用CSS，我們可以輕松地實現(xiàn)這一目標，下面是一些步驟和示例代碼，幫助你了解如何用CSS在圖片下插入文字。

1. 創(chuàng)建一個HTML結(jié)構(gòu)

我們需要一個HTML元素來包含圖片和文字，一個常見的結(jié)構(gòu)是使用一個div元素，它包含了一個img元素和一個p（段落）元素。

<div class="image-with-text">
  <img src="your-image-url" alt="圖片描述">
  <p>這里是圖片下的文字</p>
</div>

2. 應用CSS樣式

我們將使用CSS來樣式化這個結(jié)構(gòu)，使文字出現(xiàn)在圖片下方。

.image-with-text {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.image-with-text img {
  max-width: 100%;
  height: auto;
}
.image-with-text p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
}

3. 響應式設(shè)計

為了讓圖片和文字在不同屏幕尺寸下都能很好地顯示，我們可以添加一些響應式設(shè)計。

@media (max-width: 600px) {
  .image-with-text {
    flex-direction: column;
  }
}

4. 優(yōu)化和測試

確保在不同的瀏覽器和設(shè)備上測試你的設(shè)計，以確保它看起來一致和可用。

通過使用CSS的flex布局，我們可以輕松地在圖片下方插入文字，并提供響應式設(shè)計以適應不同的屏幕尺寸，這種方法不僅適用于網(wǎng)頁設(shè)計，還適用于其他需要圖片和文字組合的場合，如社交媒體帖子或電子郵件簽名，希望這些示例能幫助你創(chuàng)建出吸引人的網(wǎng)頁內(nèi)容！