Zentrum einer Liste vertikal in einem div

Möchte ich meine navigation links, in der Mitte des parent-div, vertikal. Wie mache ich das?

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

    Gemäß Ihren Kommentar zu der anderen Antwort, die Sie wollen, dass Sie vertikal ausgerichtet in der Mitte. Da Sie eine Feste Höhe bereits, sollte dies funktionieren:

    #nav ul {
    margin: 0;
    vertical-align: middle;
    line-height: 70px;
}
    Ich kann kaum die vertical-align Eigentum, Recht auf Arbeit, in der alle (oder alle) Browser. Irgendwelche Tipps, wie Sie es verwenden?
    Es arbeitete in Chrome, FF und IE 8 (Browsern, die ich getestet habe). @Lance - Danke. 🙂
    Ich benutze es die ganze Zeit. Es ist wichtig zu erkennen, dass es verwendet wird, ändern Sie die vertikale Ausrichtung des Elements Kinder und nicht das element, das Sie gehen. So funktioniert es perfekt für ein <ul> container zur Angleichung der Kind <li> - Elemente.
    Mit line-height: 70px; wenn er nicht eine kurze link-Namen, zum Beispiel: Sehr kurze link-name omg, es wird **ked up. Verwenden Sie nicht line-height vertikale Elemente ausrichten!
    Öhh vertical-align bezieht sich auf das element selbst, nicht seine Kinder

    InformationsquelleAutor Lance McNearney

  2. 0

    Ich möchte nur hinzufügen, 15 pixel padding den nav-div:

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

    Außerdem würde ich empfehlen, Bestellung Ihre Attribute alphabetisch (wie ich es getan habe, oben), so dass die Menschen leichter finden Sie das Attribut aus, für das Sie suchen.

    InformationsquelleAutor Topher Fangio

  3. 0

    Verwenden vertical-align: middle; es ist browser-kompatibel.

    InformationsquelleAutor Tigran Tokmajyan

Schreibe einen Kommentar