且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

CSS如何居中一个float浮动元素?

更新时间:2022-09-05 14:03:58

CSS居中一个float浮动元素的核心

       让最外面的层相对定位,left等于50%,然后内部嵌套层也使用相对定位且left设为-50%,这样的效果就是内层相对整行为水平居中;

 

#wrapper {
float: left;
position: relative;
text-align: left;
left: 50%;
}
#wrapper ul {
list-style: none;
position: relative;
left: -50%;
}
#wrapper ul li {
float: left;
position: relative; /* For IE6 */
}

<div id="wrapper">
<ul>
<li><a href="#">Button 1</a> </li>
<li><a href="#">Button 2's a bit longer</a> </li>
<li><a href="#">Butt 3</a> </li>
<li><a href="#">Button 4</a> </li>
</ul>
</div>










本文转自 涂根华 51CTO博客,原文链接:http://blog.51cto.com/tugenhua/772840,如需转载请自行联系原作者