How to progressively enhance inline block pagination links with respect to the spaces between the links

I'm using will_paginate, and it produces pagination links that amount to the following:

<a href="?page=2">2</a> <a href="?page=3">3</a>

There is whitespace generated between the page links. This makes sense. Just as it says in the documentation, it works well in text-based browsers and spiders (although intuitively, I don't see why the latter would be the case). Wonderful.

I want to center the links as a group. The only way (I know of) to accomplish this is to make them inline elements and to give their parent element text-align: center;.

But I'd also like to have better control over the space between the elements.

So to summarize, here are my nice to haves:

• whitespace between links
• links collectively centered
• fine-tuned (pixel-level) control for spacing between links

I can think of a few ways to accomplish this:

• refactor the pagination links into an unordered list, so that non-graphic browsers will at least render the distinctness between the links independently of the whitespace between them
• set the parent element to have font-size: 0px; and then explicitly declare the font size of the individual links

This both appeal to me as less than ideal. The first requires a lot of extraneous markup and it semantically poor in my view. The second seems to be a bit hackish.

Is there any solution that better actually meets my desires without any extra issues? Perhaps som开发者_Go百科ething like a CSS directive to ignore whitespace or something.

What about using float on the links and float them inside a box that is then center aligned:

http://jsfiddle.net/AnN9n/1/