Monter le caractère affiché en ligne

Question

J'ai le balisage suivant pour le menu du fil d'Ariane :

 <div>
    <span class="start-here">You are here:<span>
    <a href="stackoverflow.com/">example.com</a>
    <span class="raquo"> › </span> 
    <a href="stackoverflow.com/news">News</a>
    <span class="raquo"> › </span> 
    Title
</div>

Existe-t-il un moyen intelligent de déplacer ces caractères › ( .raquo ) de quelques pixels vers le haut sans positionnement absolu lorsque tous les éléments sont affichés en ligne ? Je veux que ce caractère soit plus petit que les autres et affiché au centre de la ligne (ou quelques pixels vers le bas/haut).

(J'en ai besoin pour fonctionner aussi pour IE6 et plus)

Answer 1

.raquo {
    position:relative;
    top:-2px;
}

a mieux fonctionné pour moi

Answer 2

Je ne sais pas à propos d'IE6, mais il semble que ce qui suit devrait vous rapprocher de ce que vous voulez.

 .raquo {
  font-size: 10px;
  vertical-align:middle; 
}

Faites simplement font-size ce dont vous avez besoin, l'alignement vertical devrait le placer au milieu du line-height .

Answer 3

vertical-align: 3px

avec n'importe quel montant ou unité.

Il est très puissant pour des choses comme les polices personnalisées et d'autres étendues et éléments qui sont incorrectement justifiés. Je viens de l'utiliser sur une police que j'ai reçue de mon designer.

Answer 4

S'appuyant sur la réponse de @sashn, si vous voulez le protéger contre les futurs changements de taille de police, je le ferais ...

 .raquo {
  position:relative;
  top:-0.1em;
}

De cette façon, le décalage de position sera automatiquement réduit ou agrandi en fonction de la taille de la police.

Answer 5

Vous pouvez utiliser vertical-align:top; font-size:x-small; en CSS. Il est cependant difficile d'être parfaitement au milieu...