CSS是網(wǎng)頁(yè)美化中不可或缺的一部分,在網(wǎng)頁(yè)排版方面,圖片居中是比較常用且重要的技巧。那么,如何使用CSS代碼實(shí)現(xiàn)圖片居中呢?
img { display: block; margin: 0 auto; }
其中,display: block;將圖片設(shè)置為塊級(jí)元素,margin: 0 auto;將圖片水平居中。
需要注意的是,這段CSS代碼只在圖片包含的標(biāo)簽上起作用,比如<img>或者<div>等,如果想要讓多張圖片一起居中,可以將這些圖片放到一個(gè)div標(biāo)簽里面,再將div居中,即:
.center { text-align: center; } .center img { display: inline-block; }
上面的代碼中,.center類(lèi)用于將div元素居中,text-align: center;可以將其內(nèi)部的所有元素居中;.center img類(lèi)用于將圖片設(shè)置為行內(nèi)元素,這樣就可以通過(guò)text-align來(lái)控制其居中。
總之,通過(guò)CSS代碼實(shí)現(xiàn)圖片居中,可以讓網(wǎng)頁(yè)更加美觀,而且對(duì)于排版有更好的控制。