如何居中一个浮动元素?

CSS代码

1 .wap{
2 width:500px;
3 height:300px;
4 float:left; 
5 margin-left:50%;
6 position:relative; 
7 left:-250px; 
8 background-color:#CCC; 
9 }

 

代码解读

首先设置块元素的宽度和高度，这里宽度是必须的，高度可以不设，我设置了块的背景色，以给大家看效果。实现居中关键在于 margin-left:50%; position:relative; left:-250px;

设置margin-left:50%;后浮动元素左边正好位于文档中间，设置块相对定位position:relative;然后左移宽度的二分之一，即可实现元素居中。在这个实例中宽度500，left设置为-250px.

 

posted @ 2015-05-14 17:25  KSnow  阅读(948)  评论(0)  编辑  收藏  举报