如何将浮动项目的无序列表居中到页面

Question

如果我有一个无序列表，例如

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">About</a></li>
    <li><a href="index.html">Service</a></li>
    <li><a href="index.html">Blog</a></li>
</ul>

使用 CSS 很好地对齐它们，例如

ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
ul li {
    float: left;
    line-height: 50px;
    margin-left: 5px;
    margin-right: 5px;
}
ul li a {
    display: block;
    height: 46px;
    padding-left: 5px;
    padding-right: 5px;
}

我如何才能将<ul> 元素与页面中心对齐，同时记住没有为任何元素指定宽度？

首选答案将在 ie6+ 中兼容

任何帮助表示赞赏。

杰

Answer 1

您可以将display: inline-block 与text-align: center 结合使用。

这是您的代码的实现：http://jsfiddle.net/kRDsf/

如果您需要 IE7 支持：http://jsfiddle.net/kRDsf/1/ + Inline block doesn't work in internet explorer 7, 6

如果您需要 IE6 支持，请参阅此答案中的 cmets。