當(dāng)HTML結(jié)構(gòu)如下所示:

同時(shí),CSS這樣寫:

效果如下:

很明顯,圖片并沒有水平居中。這是因?yàn)楦?dòng)元素脫離了普通文檔流,margin:0 auto也就不起作用了。
解決方法很簡(jiǎn)單:
方法一:
在浮動(dòng)元素外面再嵌套一層div,代碼如下:


此時(shí),浮動(dòng)元素就可以水平居中了:

同樣地,對(duì)于多個(gè)浮動(dòng)元素,也可以用這種方法實(shí)現(xiàn)水平居中,效果如下:

方法二:
浮動(dòng)元素水平居中-----寬度不固定的浮動(dòng)元素
html代碼

CSS樣式


方法三:
浮動(dòng)元素水平居中-----寬度固定的互動(dòng)元素
html代碼

css代碼

