So zentrieren Sie die Navigationsleiste mit CSS?

Question

Hallo ich habe Probleme mit der Zentrierung des Nav auf diesen Entwurf im für einen Client.

Hier ist der Link http://cjdrafts.info/germanserviceshop/

Bitte helfen, danke.

Answer 1

Ich bin kein Profi, noch lernen Codierung und fand einen Weg, um Ihr Problem zu beheben.

Was ich getan habe, um die Schwimmer kommentiert links für .menu-Wrapper

#Top_bar .menu_wrapper { 
    /* float: left; 
    z-index: 201;*/ 
} 

Dann 650px Breite definiert und stellen Sie den linken und rechten Rand auf Auto

.header-stack #Top_bar .menu_wrapper { 
    clear: both; 
    margin: 0 auto; 
    width: 650px; 
} 

Answer 2

1. Set width für menu_wrapper

#Top_bar .menu_wrapper { 
    z-index: 201; 
    width: 650px; 
    margin: auto; 
} 

float entfernen, fest width einstellen und margin: auto einstellen.

2. Verwenden display: inline-block statt float für li

#Top_bar .menu > li { 
    margin: 0; 
    z-index: 203; 
    display: block; 
    display: inline-block; 
} 

und:

#Top_bar .menu_wrapper { 
    float: left; 
    z-index: 201; 
    width: 100%; 
    text-align: center; 
} 

gesetzt 100% width für Eltern und text-align: center verwenden.

Answer 3

danke für die Hilfe.

Die Änderungen an einem Browser tun es funktioniert aber aus irgendeinem Grund, wenn ich die CSS-Codes in das Design-Stylesheet legte. Nichts funktioniert, ich habe beide Lösungen ausprobiert.

Was scheint das Problem zu sein? Ich bin jetzt seit mindestens 7 Tagen dabei.

Ich habe tatsächlich eine Lösung, die ein Menü-Plugin verwenden soll, aber das wird meine letzte Option sein.