本文目錄導(dǎo)讀：

1. 文字居中對齊
2. 文字與圖片間距
3. 文字顏色與字體
4. 響應(yīng)式設(shè)計(jì)

CSS文字在圖片下的排版技巧

在網(wǎng)頁設(shè)計(jì)中，我們經(jīng)常需要將文字放置在圖片下方，以便更好地展示內(nèi)容，使用CSS（級(jí)聯(lián)樣式表）可以實(shí)現(xiàn)這一需求，并且可以通過簡單的樣式調(diào)整，讓排版更加美觀和清晰。

文字居中對齊

為了讓文字在圖片下方居中顯示，我們可以使用CSS的“text-align”屬性，將其設(shè)置為“center”。

div {
  text-align: center;
}

文字與圖片間距

為了讓文字與圖片之間有一定的間距，我們可以使用CSS的“margin”屬性，如果圖片是一個(gè)段落（<p>）的一部分，我們可以這樣寫：

p {
  margin-bottom: 20px; /* 圖片下方留20像素的空白 */
}

文字顏色與字體

我們可以使用CSS的“color”屬性來設(shè)置文字顏色，使用“font-family”屬性來設(shè)置字體。

div {
  color: #333; /* 文字顏色設(shè)置為深灰色 */
  font-family: Arial, sans-serif; /* 字體設(shè)置為Arial或 sans-serif */
}

響應(yīng)式設(shè)計(jì)

為了讓文字在圖片下方在不同屏幕尺寸下都能***顯示，我們可以使用CSS的媒體查詢（Media Queries）來設(shè)置不同屏幕下的樣式。

@media (max-width: 600px) {
  div {
    text-align: left; /* 在屏幕寬度小于600像素時(shí)，文字左對齊 */
  }
}

通過以上CSS技巧，我們可以輕松實(shí)現(xiàn)文字在圖片下方的排版，并且可以根據(jù)實(shí)際需求進(jìn)行樣式調(diào)整，讓網(wǎng)頁內(nèi)容更加美觀和清晰。