html - 如何将 float 元素的无序列表置于页面中心

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