Centrage de <span> au survol

Bonjour !

Je suis actuellement en train de faire une chose simple à savoir l'apparition d'un texte au survol d'une icône. alors mon texte apparaît bien, mais j'aimerais qu'il soit bien cadré par rapport à son icône, mais ce n'est pas le cas, il y a toujours un léger décalage dû à la longueur du mot.

Voilà ce que ça donne, lorsque je survole successivement les icônes :

http://archivesda.free.fr/divers/hover.png

Je vous passe le code ci -dessous :

Le HTML :

<ul class='admin'>\n
	<li><a href='?menu&crud' class='info'><img src='./images/crud.png' title='Gestion du menu' alt='Ajout/édition/suppression' /><span>Ajout/édition/suppression</span></a></li>\n
	<li><a href='?menu&moove' class='info'><img src='./images/moove.png' title='Disposition des menus' alt='Disposition des menus' /><span>Disposition</span></a></li>\n
</ul>\n

Et le CSS :

a.info {
position:relative;
text-decoration: none;
color: black;
}
a.info span {
display: none;
}
a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 500;
}
a.info:hover span {
display: block;
position: absolute;
top: 2em;
left: -1em;
text-align : center;
color: black;
padding: 2px;
}

Merci d'avance pour toute l'aide que vous pourrez m'apporter !
Modifié par Aerandir (07 Feb 2007 - 08:49)