web-dev-qa-db-fra.com

Déplacer le caractère affiché en ligne

J'ai le balisage suivant pour le menu de chapelure:

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

Existe-t-il un moyen astucieux 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 personnage soit plus petit que les autres et qu'il soit affiché au centre de la ligne (ou de quelques pixels vers le bas/haut).

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

csslayoutpositioning
23
takeshin

Pas sûr de IE6, mais il semble que ce qui suit devrait vous rapprocher de ce que vous voulez.

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

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

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

a fonctionné mieux pour moi

49
sashn

Vous pouvez utiliser vertical-align:top; font-size:x-small; en CSS. Difficile d’être parfaitement au milieu, cependant….

1
anothershrubery

Pour ajouter à la réponse de Gunner, j'ai récemment découvert que l'utilisation de ce qui suit est très utile.

vertical-align: 3px

avec n'importe quel montant ou unité

Il est très puissant pour des éléments tels que les polices personnalisées et autres étendues et éléments mal justifiés.

Je viens de l'utiliser sur une police de mon designer.

J'espère que cela t'aides!

1
imnickvaughn