CSS set width on items in centered horizontal list

I have a horizontal list which I'm using as a paging control.

I have two additional requirements - I need to specifiy the width of some of the items, and I need to be able to center the list in the page. I can do one or the other, but I can't work out how to achieve both.

See the below as an example/starting point:

<ul>
    <li class="previous"><a>previous</a></li>
    <li><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
    <li><a>4</a></li>
    <li class="next"><a>next</a></li>
</ul>

li
{
    display: inline;
    list-style-type: none;
    margin: 5px;
}

a
{
    padding: 2px 开发者_C百科10px 2px 10px;
    border: solid 1px #aaa;
    color: #131313;
    text-decoration: none;
}

jsFiddle here.

I would like the previous and next items to be the same width, and I would like the whole thing centered in the page. Note that I can't know the width of the complete list, so using a container with margin: 0 auto; isn't going to work afaik.

Must be cross-browser and support IE6.

---

See: http://jsbin.com/azoquv

• text-align: center on ul centers the whole thing.
• display: inline-block and the hack for IE6/7 allows you to set your own width on li.

Tested in IE6/7 + Chrome. It will just work in all modern browsers.

ul {
    text-align: center;
    margin: 0;
    padding: 0
}
li
{
    display: inline-block;
    *display: inline;
    zoom: 1;

    list-style-type: none;
    margin: 5px;
}

a
{
    display: block;
    padding: 2px 10px 2px 10px;
    border: solid 1px #aaa;
    color: #131313;
    text-decoration: none;
}