Vertical align... pas résolu du tout !

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

voila le code:

<div id="slider">
  <a href="#image1">&#9632;</a>
  <a href="#image2">&#9632;</a>
  <a href="#image3">&#9632;</a>
  <a href="cat-lum.html"><span>&#9003;</span></a>

</div>

et la css qui m'agace....

#slider {text-align:right;}

#slider a {
	text-align:right;
  text-decoration: none;
  color: #666;
  font-size: x-large;
    vertical-align:middle;
}

#slider a span {
	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 j'obtiens ceci !

le dernier caractères n'est pas aligné sur la ligne des autres... !

J'ai cherché...
J'ai pas trouvé !

Je suis un boulet !

bref... aidez moi !

merci !

vertical-align n'agit pas dans ton cas : il faut donner à tes liens un display inline-block ou table-cell (un peu moins compatible <IE9) afin qu'il soit pris en compte.

Ça devrait fonctionner

Yes merci ! ça marche !!!

Zut... non... c'est mieux mais pas encore ça.....

j'ai modifié le CSS comme ceci :

#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 c'est toujours décalé !


Théoriquement le "display: inline-block" et le "vertical-align : middle" devrait aligner verticalement les deux éléments...

C'est agaçant... !
Modifié par romfrom (18 Nov 2013 - 17:50)

Bonsoir,

C'est une histoire de hauteurs de ligne différentes.

Si tu impose un line-height: 1; dans la règle concernant #slider a ça me semble OK.

Par contre attention si tu comptes utiliser ces caractères unicodes, il vaut mieux vérifier sur plusieurs navigateurs. Par exemple le dernier caractère ne s'affiche pas sur mon Chrome Windows

merci raphael...
je tente le coup...

cela peut être résolu en précisant une height et une line-height possedant les même valeur.