Wie man horizontal richten Sie ein ul-element zu zentrieren

Ich bin nicht in der Lage, richten Sie ein Menü, das sich in einem ul zu der horizontalen Mitte des Containers. wie macht man das?

Sehen live-demo im Menü auf jsFiddle.

<li><a href="aboutus.php">AboutUs</a>
    <ul class="sub">
        <li><a href="aboutsquare.php">About Square Innovations</a></li>
        <li><a href="ourvision.php">Our Vision</a></li>
        <li><a href="ourmission.php">Our Mission</a></li>
        <li><a href="trainerprofiles.php">Trainer Profiles</a></li>
        <li><a href="funclass.php">Fun In Our ClassRooms</a></li>
    </ul>
</li>
InformationsquelleAutor Krishna Thota | 2013-01-24
  1. 4

    Können Sie die Adresse ul - element als inline-level-element in die Seite fließen, wobei seine block-level-Eigenschaften (mit der inline-block display — Wert) - nach der Anwendung, es kann einfach ausgerichtet innerhalb des Containers wie alle inline-level-element, mit text-align.

    Um dies zu implementieren, fügen Sie den folgenden Regeln:

    #container {
    text-align: center;
}
ul {
    display: inline-block;
}

    Hier ist die aktualisierte demo.

    Referenz

    Haftungsausschluss: Unterstützung für inline-block etwas begrenzt ist, siehe die Kompatibilitäts-Tabelle auf caniuse.com.

    InformationsquelleAutor Eliran Malka
  2. 4

    Es ist ein sehr neath, voll cross-browser und dynamische "trick" um dies zu erreichen, solange bleibt das Menü in einer Zeile. Es ist sehr gut erklärt hier: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

    Inline-block oft vorgeschlagen, für dieses problem ist nicht sehr gut unterstützt, bei älteren Browsern zu meiner Erfahrung. Um ehrlich zu sein, ich benutze es nie. Ich gehe immer für die clevere Methode, Matthew James Taylor beschreibt.

    Edit:
    Wie gewünscht werde ich kurz beschreiben, die Technik.
    Ihre Datei sollte Aussehen wie eine normale Liste von links, mit einer extra-Verpackung div. So etwas wie dieses:

    <div class="menu-wrapper">
  <ul>
    <li><a ...>link</a></li>
    <li><a ...>link</a></li>
    <li><a ...>link</a></li>
  </ul>
</div>

    Nun den rest mit css zu arbeiten. Die Schritte sind wie folgt:

    • Float wrapper-auf der linken Seite und geben Sie eine Breite von 100% zu machen es dauern, bis die volle viewport-Breite
    • Schwimmer sowohl die ul und die li auf der linken Seite und geben Sie nicht in beliebiger Breite, um Sie anzupassen, um Ihre Inhalte.
    • Geben die ul eine position: relative von left: 50%. Dadurch wird es den linken Rand bewegen, um das Zentrum der Eltern, und dies bedeutet, dass die Mitte des Viewports.
    • Schließlich sollten Sie Ihrem li eine position: relative von left: -50%. Sie sind damit vorbei bewegen Sie den linken Rand des übergeordneten ul und macht die Mitte der Liste der li's line-up mit dem linken Rand des übergeordneten ul. Da wir uns am Rande der Mittelpunkt des Viewports in der vorherigen Schritt, das Menü ist jetzt effektiv zentriert.

    Wie ich schon sagte, alle Kredite an Matthew James Taylor, und auf jeden Fall check out seine Gründliche Erklärung. Die Zeichnungen, die er gemacht es viel einfacher zu verstehen.

    Bearbeiten

    Wie gewünscht habe ich ein wenig tüfteln, um das Verfahren zu veranschaulichen:
    http://jsfiddle.net/fDmCQ/

    • Sie sind natürlich richtig. die (älteren) IE haben Schwierigkeiten zu Rendern inline-block Elemente. dies ist ein guter - Artikel, beschreiben Sie bitte die zugrunde liegende Logik oder umfassen die Höhepunkte innerhalb Ihrer Antwort, um es selbst enthalten ist.
    • froh, dass es dir gefällt. Ich nahm Ihren Vorschlag an und verbessert meine Antwort. Und ich freue mich auf Tag machen wir nicht mehr Unterstützung von alten IE-Versionen (oder keine IE überhaupt, wenn es wo zu mir)! 😉
    • Können Sie bitte geben Sie mir eine Geige formy Beispiel???
    • Ich habe versucht, eine Geige auf meinem iPad (das ich nicht empfehle) und den link in meiner Antwort. Fühlen Sie sich frei zu Fragen, wenn Sie jede weitere Erklärung!
    InformationsquelleAutor Pevara
  3. 1

    Ändern, die Marge auf die <ul> zu 0 auto und geben Sie eine Breite (~575px oder größer).

    jsFiddle-Beispiel

     ul {
     font-family: Arial, Verdana;
     font-size: 14px;
     margin: 0 auto;
     padding: 0;
     width:600px;
     list-style: none;
     text-align: center;
 }
    • dies erfordert das hinzufügen einer expliziten Breite der ul element, so dass es starr. was, wenn Sie mehr Elemente der Liste?
    • Was ist mit der down-vote? Ist diese Antwort irgendwie nicht sinnvoll oder falsch?
    InformationsquelleAutor j08691
Schreibe einen Kommentar