Centre une liste verticalement dans un div

Je veux que mes liens de navigation pour être dans le milieu de la div parent, à la verticale. Comment dois-je faire?

HTML:

<div id="nav">
    <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>

CSS: 

#nav {
  background: #8DC3E9;
  width: 100%;
  height: 70px;
  border-bottom: 2px solid #4C88BE;
}

#nav ul {
  margin: 0;
}

#nav ul li {
  display: inline;
  font-size: 40px;
}
InformationsquelleAutor Andrew | 2010-01-30
  1. 1

    En fonction de votre commentaire à l'autre réponse, vous voulez qu'ils alignés à la verticale au milieu. Puisque vous avez une hauteur fixe déjà, cela devrait fonctionner:

    #nav ul {
    margin: 0;
    vertical-align: middle;
    line-height: 70px;
}
    • Je ne peux jamais obtenir la vertical-align bien à l'œuvre dans tous (ou toutes) les navigateurs. Des conseils sur la façon dont vous l'utiliser?
    • Il a travaillé dans Chrome, FF et IE 8 (les navigateurs que j'ai testé sur). @Lance - Merci. 🙂
    • Je l'utilise tout le temps. Il est important de réaliser qu'il est utilisé pour modifier l'alignement vertical des enfants de l'élément et non pas l'élément que vous êtes réglage. Il fonctionne parfaitement pour un <ul> conteneur à aligner son enfant <li> éléments.
    • Avec line-height: 70px; s'il n'a pas un lien court nom, par exemple: Très court nom du lien omg, ça va être **ked vers le haut. Ne pas utiliser la ligne de hauteur à la verticale aligner les éléments!
    • Ermm vertical-align s'applique à l'élément lui-même, et non pas de ses enfants
    InformationsquelleAutor Lance McNearney
  2. 0

    Je voudrais juste ajouter un 15 pixels rembourrage à la valeur liquidative div:

    #nav {
  background: #8DC3E9;
  border-bottom: 2px solid #4C88BE;
  height: 70px;
  padding-bottom: 15px;
  padding-top: 15px;
  width: 100%;
}

    Aussi, je vous suggère fortement de commander vos attributs par ordre alphabétique (comme je l'ai fait ci-dessus), de sorte que les gens puissent plus facilement trouver de l'attribut pour lequel ils sont à la recherche.

    InformationsquelleAutor Topher Fangio
  3. 0

    Utilisation vertical-align: middle; il est compatible avec les navigateurs.

    InformationsquelleAutor Tigran Tokmajyan