Centering an unordered list inside a div

Earlier today I needed to create a centered div containing a centered, inline, unordered list to represent a results paginator similar to what you see at the bottom of search result pages. This had me scratching my head longer than necessary because whereas I had the element centered straight off the bat, the border was not displaying top and bottom in Internet Explorer. I had Googled for other examples but didn’t really find my exact problem. As is the nature of these things, a little while after posting for help on the Accessify forums I found the fix myself.

Without further ado and to help future “Googlers” here’s the markup I used to center a div containing a centered, unordered list within it. Feel free to add style and note that the width of the div is both required and limiting at the same time. It works (i.e. stays on one line) up to +2 scaling in Firefox and “Largest” in Internet Explorer 6 but after that it wraps to a new line (obviously, list length and text size will also contribute to when a new line is formed).

Here’s the markup:

<div id="pagination">
<ul>
<li>Pages of results:</li>
<li>Previous</li>
<li class="current-page">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>Next</li>
</ul>
</div>

Got to love WordPress’ failure to leave the anchor tags alone, sorry.

and here’s the style sheet:

/* Results Pagination ------------------------------ */
#pagination{
margin:0 auto 0 auto; /* in full to help IE5Mac */
padding:0;
width:600px;
}

#pagination ul{
display:inline;
margin:0;
padding:0.5em;
list-style:none;
border:1px solid #000;
}

#pagination ul li{
display:inline;
margin:0;
padding:0.5em;
}

.current-page{font-weight:bold;} 

You can see a working example of this technique here.