使用浮动的li元素居中一个ul列表

Question

我有

<div id="container">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

使用以下CSS代码：

下面是示例：

#container li {
float:left;
height:33px;
line-height:30px;
text-align:center;
width:auto;
}

#container{
 width:600px;
}

然而，我在水平居中 #container 内的 ul 上遇到了困难。看起来我需要为 margin: 0 auto 设置一个固定宽度（需要在 IE 中设置 text-align: center）。但是，我不想为 ul 设置固定宽度，因为 li 项将是动态的。

请给予建议。

- cadaa

Answer 1

#container {
    width: 600px;
    text-align: center;
}

#container ul {
    display: inline-block;
}

#container li {
    float: left;
    height: 33px;
    line-height: 30px;
}

- reko_t

---

谢谢，但是inline-block在IE6（和IE7？）中不起作用吗？ - cadaa

你可以尝试这个技巧来让它在IE上工作（我无法验证其是否有效，因为我现在使用的是Mac）。将以下内容添加到#container ul中：zoom: 1; *display: inline; 其背后的原理在这里解释：http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ - reko_t

Answer 2

这里有一个很好的解决方案： http://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/，可以帮助您将列表项水平居中。

<div id="menu-outer">
    <div class="table">
        <ul id="horizontal-list">
            <li><a href="#"><img src="images/list-item-1.gif" alt="list item 1" /></a></li>
            <li><a href="#"><img src="images/list-item-2.gif" alt="list item 2" /></a></li>
            <li><a href="#"><img src="images/list-item-3.gif" alt="list item 3" /></a></li>
            <li><a href="#"><img src="images/list-item-4.gif" alt="list item 4" /></a></li>
        </ul>
    </div>
</div>

现在看看使其变得简单的CSS：

代码如下：

#menu-outer {
    height: 84px;
    background: url(images/bar-bg.jpg) repeat-x;
}

.table {
    display: table;   /* Allow the centering to work */
    margin: 0 auto;
}

ul#horizontal-list {
    min-width: 696px;
    list-style: none;
    padding-top: 20px;
}
ul#horizontal-list li {
    display: inline;
}

这是通过表格的 div 完成任务的。有时我觉得“能用就行”应该成为 CSS 的口号。

- user1015687

Answer 3

在 CSS 中：

ul {
   float: left;
}

jQuery

centerize = function(){
        var parentWidth = $("ul").parent("#container").width();
        var width = $("ul").width();
        var dif = (parentWidth - width) / 2;
        $("ul").css("margin-left", dif + "px");

    };

    centerize();

可能您需要为每个浏览器缩放级别进行工作，因此请添加：

$(window).resize(function(){
    centerize();
});

- Kamran Asgari