Remplacement de texte par une image avec display:none et display:block

Bonjour, je souhaiterais avoir un renseignement sur un problème de présentation que j'ai.

Dans le corps de ma page (ici), j'affiche une liste d'éléments. La liste étant sur plusieurs pages, j'affiche également des liens de pagination (première page, dernière page, précédent, suivant).

<div id="pager">
	<div id="index">
		<a href="#" class="debut"><span class="label">Première</span></a>
		etc...
	</div>
</div>

Ces liens sont sous forme de texte, et mon CSS (ici) permet d'afficher des images à la place des textes.

#pager #index a span.label{
	display: none;
}
#pager #index a.prec, {
	display:block;
	float:left;
	background-image: url(prec.jpg);
	background-repeat:no-repeat;
	width:25px;
	height:18px;
	margin: 5px;
	
}

Le sytème fonctionne, mais je n'arrive pas à trouver comment faire pour donner un style à mon bloc de lien de pagination : le centrer lui mettre un bord et un fond.
Si je supprime display ou float, mes images sont les unes en dessous des autres et non plus alignées, et si j'utilise visibility:hidden pour cacher le texte, il est bien caché mais les images s'affichent alors dans un espace égal à la taille du texte qu'elles remplacent (si une image remplace "dernière page" elle va avoir beaucoup de vide après elle, mais si elle remplace "fin", elle ne sera même pas affichée en entier).

Pour résumer voici ce que j'ai :
http://membres.lycos.fr/mystemp/style1.jpg
et voici ce que je souhaiterais sans changer le HTML : http://membres.lycos.fr/mystemp/style2.jpg

Je dois avoir un problème de décalage puisqu'un contenu trop petit me fait un gros vide : http://membres.lycos.fr/mystemp/style3.jpg

Avez vous une idée de comment faire pour donner un style à ce bloc de pagination et aussi éviter d'avoir un gros vide dans certains cas ?

Merci de votre aide