bootstrap "mega-dropdown" Zentrierung Hauptmenü nav Elemente

Question

Ich versuche, eine Hauptmenü-Navigation mit einer vollen Breite Bildschirm Dropdown-Menüs darunter zu bauen. Ich habe ein großartiges Beispiel gefunden, von dem ich aufbauen kann, aber ich kann nicht herausfinden, wie das Hauptmenü im Mittelpunkt steht.

Hier ist, was ich bisher habe, siehe Beispiel hier: http://codepen.io/ajmajma/pen/ALJbdk.

Das funktioniert perfekt, aber ich brauche diese Hauptmenüpunkte (zu Hause, über, etc ..) zentriert werden.

Mein erster Gedanke war zu inline-block sie, aber das verursacht etwas schraubenartiges Verhalten mit dem Untermenü.

IF I

.desktop-nav { 
    text-align: center 
} 

.menu { 
    display: inline-block 
} 

hinzufügen Ich erhalte den gewünschten zentrierte Effekt jedoch das Untermenü, um die die kleine Zentrum Größe der ul beschränkt, und ich brauche es die volle Breite der Seite zu bleiben. Siehe Verhalten hier - http://codepen.io/ajmajma/pen/wzYPQm.

Haben Sie eine Idee, wie Sie das beheben können, um den gewünschten Effekt zu erzielen? Vielen Dank!

Answer 1

Sie könnten eine text-align:center an die UL hinzufügen und eine display:inline-block an die li hinzufügen. Entfernen Sie einfach die float:left aus dem li und du bist gut.

.desktop-nav { margin-left: 50%; }

und .menu > ul > li > ul { margin-left: -50%; }

wenn Sie nicht über den Rand in den Desktop festlegen möchten,:

.menu > ul { 
    margin: 0 auto; 
    width: 100%; 
    list-style: none; 
    padding: 0; 
    position: relative; 
    box-sizing: border-box; 
    text-align:center; 
} 

.menu > ul > li { 
    display: inline-block; 
    padding: 5px; 
    margin: 0; 
} 

http://codepen.io/Founded1898/pen/amREJm

Answer 2

ich habe die Lösung für dieses Problem gefunden muss etwas wie .iWantThisMenuToCenter{margin-left: 50%} erstellen und dem nav-Tag

zuweisen