Alignement...

Salut à tous...
Je m'arrache les cheveux !
donc le but est d'avoir une navigation composée de petit carrés...
Vo!la le code

<div id="slider">
  <a href="#image1">■</a>
  <a href="#image2">■</a>
  <a href="#image3">■</a>
  <a href="cat-lum.html"><span>⌧</span></a>
</div>

et voici le CSS

#slider {text-align:right;
}
#slider a {
display: inline-block;
text-align:right;
text-decoration: none;
color: #666;
font-size: x-large;
vertical-align:middle;
}
#slider a span {
display: inline-block;
text-align:right;
text-decoration: none;
color: #666;
font-size: small;
font-weight:bolder;
vertical-align:middle;
}
#slider a:hover {
 color: #333;
}
#slider a span:hover {	
color: #333;
}

et le résultat... ben c'est pas bon, les caractères ne sont pas alignés...
Le dernier caractères est plus bas sur la ligne de base que les autres....
J'ai essayé avec d'autres entités... c'est pareil !
J'aimerais comprendre....
normalement mon "display: inline-block" devrait me permettre de régler le problème mais non !