浮动居中float:center-优快云博客

本文介绍了一种使用浮动和相对定位实现列表项居中的方法。通过将ul设置为相对定位并向左移动50%，同时使li浮动并向右移动50%，实现了无论列表项数量变化都能保持居中的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天看到了一种浮动居中方法，用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