Alignement vertical du texte dans la barre de navigation

Question

j'essaie d'utiliser <span> pour déplacer du texte dans ma barre de navigation.Ma barre de navigation est un <ul> et les éléments sont tous <li>s mais le texte est aligné en haut de la barre de navigation et je veux qu'il soit centré verticalement.Comme vous pouvez le voir dans JSFiddle, j'utilise une propriété a:hover en CSS pour modifier l'arrière-plan et la couleur du texte lorsqu'il est survolé.Lorsque j'applique la durée uniquement au texte, toute la section en survol est également déplacée.Voyez si vous pouvez comprendre ce que je veux dire.

Mon JSFiddle est ici :

http://jsfiddle.net/G8CJ7/

Fondamentalement, je veux juste que le texte soit aligné verticalement, de manière simple et concise.À l'origine, j'utilisais des balises '' et je définissais une marge dessus, mais je souhaite éviter d'utiliser des balises d'en-tête à cette fin pour améliorer le référencement.Merci.

Answer 1

Mise à jour quelques années plus tard, mais il est toujours possible d'utiliser :

display:table;
display:table-row;
display:table-cell;

avec vertical-align:milieu;afin de centrer les éléments.Je préfère cette approche ces jours-ci car vous pouvez appliquer des règles réactives au style d'affichage (par exemple, le modifier en display:block et display:inline-block etc.si vous devez le mettre à jour pour d'autres tailles d'écran.Voici un violon :

http://jsfiddle.net/G8CJ7/68/

Answer 2

http://jsfiddle.net/G8CJ7/1/

Ajout de line-height:40px pour centrer le texte verticalement.IE7 aura des problèmes avec cela car il n'est pas entièrement pris en charge, donc une feuille de style conditionnelle avec un padding-top sur le li le résoudra.

Answer 3

L'ajout de hauteur de ligne fonctionne, vous pouvez également ajouter un remplissage en haut :

.class { padding-top: 10px; }

Ajustez le rembourrage au centre.