本文目錄導讀：

1. 文字對齊
2. 圖片對齊
3. 綜合應用

CSS技巧和排版規(guī)則：如何對齊文字和圖片

在CSS中，對齊文字和圖片是一個常見的需求，為了實現(xiàn)這一目的，我們需要掌握一些基本的CSS技巧，并了解如何應用這些技巧來優(yōu)化網(wǎng)頁排版。

文字對齊

文字對齊是CSS中***基本的概念之一，我們可以使用text-align屬性來設置文字的對齊方式，該屬性有以下值可供選擇：

left將文字對齊到左側(cè)。

right將文字對齊到右側(cè)。

center將文字對齊到中心。

justify將文字對齊到兩側(cè)，使每行等長。

如果我們想要將一段文字對齊到右側(cè)，我們可以這樣寫：

p {
  text-align: right;
}

圖片對齊

與文字對齊類似，圖片的對齊也可以通過CSS來實現(xiàn)，我們可以使用vertical-align屬性來設置圖片與周圍內(nèi)容的對齊方式，該屬性有以下值可供選擇：

top將圖片對齊到頂部。

middle將圖片對齊到中間。

bottom將圖片對齊到底部。

如果我們想要將一張圖片對齊到中間，我們可以這樣寫：

img {
  vertical-align: middle;
}

綜合應用

在實際應用中，我們可能需要同時考慮文字和圖片的對齊，這時，我們可以結(jié)合使用text-align和vertical-align兩個屬性來實現(xiàn)，如果我們想要將一段文字對齊到右側(cè)，并且讓圖片與文字在垂直方向上居中對齊，我們可以這樣寫：

p {
  text-align: right;
}
img {
  vertical-align: middle;
}