浮动居中float:center

最新推荐文章于 2023-02-22 18:54:04 发布

weixin_30275415

最新推荐文章于 2023-02-22 18:54:04 发布

阅读量337

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/joe235/archive/2008/09/16/1291463.html

版权

今天看到了一种浮动居中方法，用float:center实现li是浮动的，并且是居中的（li个数不固定，ul宽度未知）。平时一般设置ul的text-align:center，再设置li的display，可以实现居中。

下面说一下float:center实现浮动居中的思路，采用的是相对定位：ul为position:relative;left:50%，然后再让li像左浮动，在让它position:relative;right:50%（或者left:-50%），那么li就像向中间浮动一样居中了。

ul,li {
    margin : 0 ;
    padding : 0 ;
    list-style : none ;
}
#area {
    width : 100% ;
    height : 80px ;
    background-color : #eee ;
    text-align : center ;
    overflow : hidden ;
}
#area ul {
    float : left ;
    position : relative ;
    left : 50% ;
}
#area ul li {
    float : left ;
    margin : 10px ;
    padding : 0 10px ;
    position : relative ;
    right : 50% ;
    line-height : 60px ;
    border : solid 1px #000 ;
}

效果：

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档-SH!</title> <style> ul,li{ margin:0; padding:0; list-style:none; } #area{ width:100%; height:80px; background-color:#eee; text-align:center; overflow:hidden; } #area ul{ float:left; position:relative; left:50%; } #area ul li{ float:left; margin:10px; padding:0 10px; position:relative; right:50%; line-height:60px; border:solid 1px #000; } </style> </head> <body> <h1>跨浏览器实现float:center</h1> <div id="area"> <ul > <li>列表一,我是浮动的</li> <li>列表二</li> <li>列表三</li> <li>这里可能是N</li> </ul> </div> </body> </html>

提示：可以先在文本框内，根据需要修改代码后再运行

转载于:https://www.cnblogs.com/joe235/archive/2008/09/16/1291463.html