在html中，可以使用text-align屬性設(shè)置居中顯示圖片，只需要給圖片元素設(shè)置“text-align:center”即可。text-align屬性規(guī)定元素中圖片的水平對(duì)齊方式，當(dāng)值為center時(shí)，表示把圖片排列到中間。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

然后我們需要在body部分新建一個(gè)div標(biāo)簽，并在其中插入一張img圖片。并給div添加簡(jiǎn)單的css樣式。

然后我們?cè)跒g覽器中查看效果，可以發(fā)現(xiàn)圖片是默認(rèn)左對(duì)齊的，并沒(méi)有在div的正中央顯示。

此時(shí)為圖片添加居中屬性也是沒(méi)有用的，我們需要將圖片套在一個(gè)p或者span標(biāo)簽中，給標(biāo)簽添加一個(gè)text-align:center屬性。

這樣修改之后，我們?cè)俅位氐綖g覽器中刷新頁(yè)面，可以看到圖片已經(jīng)是在div中居中顯示了。

推薦學(xué)習(xí)：html視頻教程