当HTML结构如下所示:

同时,CSS这样写:


很明显,图片并没有水平居中。这是因为浮动元素脱离了普通文档流,margin:0 auto也就不起作用了。
解决方法很简单:
方法一:
在浮动元素外面再嵌套一层div,代码如下:


此时,浮动元素就可以水平居中了:

同样地,对于多个浮动元素,也可以用这种方法实现水平居中,效果如下:

方法二:
浮动元素水平居中-----宽度不固定的浮动元素
html代码

CSS样式


方法三:
浮动元素水平居中-----宽度固定的互动元素
html代码

css代码


网友评论