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

1. 水平居中
2. 垂直居中
3. 同時(shí)居中

CSS文字與圖片居中排版技巧

在網(wǎng)頁設(shè)計(jì)中，我們經(jīng)常需要將文字與圖片居中排版，以使得頁面看起來更加美觀、整潔，而CSS（層疊樣式表）則是幫助我們實(shí)現(xiàn)這一目標(biāo)的利器，下面，我們將詳細(xì)介紹如何使用CSS來將文字與圖片居中排版。

水平居中

水平居中是指將文字或圖片在水平方向上居中顯示，在CSS中，我們可以使用“margin:auto”來實(shí)現(xiàn)，假設(shè)我們有一個(gè)圖片元素，我們可以這樣寫：

img {
  margin: auto;
  display: block;
}

這段CSS代碼會(huì)將圖片元素在水平方向上居中顯示，我們還需要將圖片元素的“display”屬性設(shè)置為“block”，以確保圖片元素能夠像塊級(jí)元素一樣進(jìn)行居中處理。

垂直居中

垂直居中是指將文字或圖片在垂直方向上居中顯示，在CSS中，我們可以使用“vertical-align:middle”來實(shí)現(xiàn)，假設(shè)我們有一段文字，我們可以這樣寫：

p {
  vertical-align: middle;
}

這段CSS代碼會(huì)將段落元素在垂直方向上居中顯示，需要注意的是，如果段落元素的父元素高度不夠，那么段落元素可能會(huì)無法完全居中顯示，我們需要確保段落元素的父元素高度足夠。

同時(shí)居中

同時(shí)居中是指將文字與圖片同時(shí)在水平和垂直方向上居中顯示，在CSS中，我們可以結(jié)合使用“margin:auto”和“vertical-align:middle”來實(shí)現(xiàn)，假設(shè)我們有一個(gè)圖片元素和一段文字，我們可以這樣寫：

img, p {
  margin: auto;
  vertical-align: middle;
  display: block;
}

這段CSS代碼會(huì)將圖片元素和段落元素同時(shí)在水平和垂直方向上居中顯示，需要注意的是，如果圖片元素和段落元素的父元素高度不夠，那么它們可能會(huì)無法完全居中顯示，我們需要確保圖片元素和段落元素的父元素高度足夠。