當(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代碼