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

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支持，请参阅此答案的评论。