Centering some items within div

I have a bit of a problem with centering parts of my navigation. Here's the markup structure:

<div id="pagination_navigation">
    <a href="#" class="first">First</a>
    <a href="#" class="page_item">1</a>
    <a href="#" class="page_item active_item">2</a>
    <a href="#" class="last">Last</a>
</div>

And here's the relevant CSS:

#pagination_navigation {
    text-align: center;
}
#pagination_navigation .first {
    float: left;
}
#pagination_navigation .last {
    float:right;
}
#pagination_navigation .page_item {
    display: inline;
    width: 6px;
    height: 10px;
    text-indent: -9999px;
    white-space: nowrap;
    background: url(fancyimage.png) no-repeat;
}

Basically I want all the page_items to be centered with a small margin between each other, and the first and last links should be on their respective sides. At first I was going to wrap all the page_items in a div and center that using margin: 0 auto; but the markup structure can't change, because the Javascript expects this exact structure.

With the CSS you see 开发者_如何转开发above, the page_items are centered as they should, but text-indent: -9999px; doesn't work, so the text is still there (which I do not want). Any idea on how I can get rid of the text but keep the link and the centering?

You seem to be missing a dot before page_item in your CSS.

This means that the CSS targetting #pagination_navigation page_item has no effect on any elements.

What you want is:

#pagination_navigation .page_item {
    display: inline;
    width: 6px;
    height: 10px;
    text-indent: -9999px;
    white-space: nowrap;
    background: url(fancyimage.png) no-repeat;
}

The dot before page_item indicates that you're refering to a class name. Without the dot you're refering to an element with the name page_item.

Also, you can't use the text-indent on inline level elements. Changing this to inline-block will fix your problem.

Here's a demo: http://jsfiddle.net/wBreU/1/

Change this line:

#pagination_navigation page_item {

To this:

#pagination_navigation .page_item {

And things should start working better!

You could also use "display: inline-block;" instead of "display: inline". It should be what you need.