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

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/ + 内联块在Internet Explorer 7,6中不起作用

如果您需要IE6支持,请参阅此答案的评论.