horizontal ausrichten li in ul auf mehreren Reihen

Question

Ich habe ein Menü mit mehreren Listitem in ihm: JS Fiddle

Mein Ziel ist es, die Listitem dinamically auszurichten, auch wenn es auf zwei oder mehr Zeilen bricht.

So etwas wie die mittlere Taste in Wort. Wenn ich Text-Aling auf den <li> Elementen mache, richtet es es gerade in der <li> sich aus. wenn ich margin: 0 auto auf dem <li> mache, bricht es wie 8 Reihen auf.

Es sollte some wie:

Gibt es eine Möglichkeit, dies zu erreichen?

Answer 1

Verwenden Eltern Styles als

{ 
    display:flex; 
    flex-wrap:wrap; 
    justify-content:center; 
} 

Answer 2

Hier, s eine aktualisierte Geige. https://jsfiddle.net/bw5jw92L/1/

Sie müssen text-align:center zum enthält UL, hinzuzufügen und auch den Schwimmer aus den LI ‚s zu entfernen und eine display:inline-block hinzuzufügen.

Hier sind die Änderungen:

.TopMenuBlock .topCMSListMenuUL { 
    font-size: 18px; 
    margin: 0; 
    font-weight: 600px; 
    padding: 0; 
    list-style: none; 
    padding-top: 115px; 
    margin: 0 auto; 
    width: 68%; 
    text-align:center; 
} 

.topCMSListMenuLI, .topCMSListMenuHighlightedLI, .topCMSListMenuLILast, .topCMSListMenuHighlightedLILast { 
    position: relative; 
    display:inline-block; 
} 

Answer 3

Wie andere erwähnt haben, können Sie die Li-Anzeige einstellen: inline ;, oder schweben die li nach links oder rechts . Zusätzlich können Sie auch display: flex; auf der ul. Im folgenden Ausschnitt habe ich auch den justify-content hinzugefügt: space-around, um ihm mehr Abstand zu geben.

Weitere Informationen zu flexbox finden Sie in dieser vollständigen Anleitung.

#div_top_hypers { 
 
    background-color:#eeeeee; 
 
    display:inline;  
 
} 
 
#ul_top_hypers { 
 
    display: flex; 
 
    justify-content:space-around; 
 
    list-style-type:none; 
 
}

<div id="div_top_hypers"> 
 
    <ul id="ul_top_hypers"> 
 
     <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li> 
 
     <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li> 
 
     <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li> 
 
     <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li> 
 
     <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li> 
 
    </ul> 
 
</div>