Verticalement L'Alignement Du Texte Dans La Barre De Navigation

Je suis en train 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é sur le bord supérieur de la barre de navigation et je veux qu'il soit centrée verticalement. Comme vous pouvez le voir dans le JSFiddle, je suis en utilisant un a:hover propriété en CSS pour modifier l'arrière-plan et la couleur du texte lorsqu'il est survolé. Quand j'applique la durée pour que le texte, l'ensemble planant section est déplacé trop. Voyez si vous pouvez comprendre ce que je veux dire.

Mon JSFiddle est ici:

http://jsfiddle.net/G8CJ7/

Fondamentalement, je veux juste le texte verticalement alignés en simple, concis. À l'origine, j'ai été en utilisant les balises et la définition de la marge sur eux, mais je veux éviter d'utiliser des balises d'en-tête pour cette fin pour l'amélioration du RÉFÉRENCEMENT. Merci.

InformationsquelleAutor MillerMedia | 2012-02-28
  1. 3

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

    Ajouté line-height:40px pour centrer le texte verticalement. IE7 aura des questions à ce qu'il n'est pas entièrement pris en charge, sous condition de la feuille de style avec un padding-top sur le li va le résoudre.

    • Génial, merci, c'est parfait!
    InformationsquelleAutor Justice Erolin
  2. 3

    Ajouter de la hauteur de ligne fonctionne, vous pouvez également ajouter un rembourrage pour le haut:

    .class { padding-top: 10px; }

    Ajuster la marge au centre.

    InformationsquelleAutor alairock
  3. 0

    Mise à jour de cette une couple d'années plus tard, mais il y a toujours l'option de l'aide:

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

    avec vertical-align:middle; afin de centrer les éléments. Je préfère cette approche de ces jours parce que vous pouvez appliquer sensible règles pour le style d'affichage (par exemple, changer en display:block et display:inline-block etc. si vous avez besoin de le mettre à jour pour les autres tailles d'écran. Voici un violon:

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

    InformationsquelleAutor MillerMedia