How can I centre an unordered list of floated items to the page

If I have an unordered list, e.g.

<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>

Using CSS to align them nicely, e.g.

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;
}

How can I then align the <ul> element to the centre of the page, baring in mind that there are no widths specified for any elements?

Preferred answer will be开发者_如何学Go compatible in ie6+

any help appreciated.

Jai

You can use display: inline-block combined with text-align: center.

Here's an implementation of that with your code: http://jsfiddle.net/kRDsf/

If you need IE7 support: http://jsfiddle.net/kRDsf/1/ + Inline block doesn't work in internet explorer 7, 6

If you need IE6 support, see the comments on this answer.