TwentyTwelve - Menü sitzt bei "center" Angabe nicht exakt mittig

Hallo Leute,

ich suche nun schon eine Weile nach einer Lösung, bisher aber leider erfolglos. Ich nutze das originale TwentyTwelve Theme, welches per Child angepasst wurde.

Das Menü, welches original linksbündig in der Menüleiste sitzt, sollte zentriert werden. Dies habe ich über die style.css im Child Theme bewerkstelligt. Genutzt habe ich dafür folgenden COde aus der originalen CSS:

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    ...
    [B]text-align: center;[/B]
    ...
}

Natürlich ersetzen die "..." nur restliche Angaben, zur Bestimmung der border-color, etc..

Die ursprüngliche Ausrichtung "left" wurde also lediglich auf "center" geändert, was auch bewirkt, dass die Textausrichtung zentriert dargestellt wird.

Bei genauerem Nachmessen, musste ich aber feststellen, dass das Menü eben doch nicht "wirklich" zentriert ist, sondern ca. 45px zu weit nach links verschoben ist. Getestet habe ich also nochmal "left", mit dem Ergebnis, dass das Menü direkt bei 0, ganz links beginnt. Mit "right" sitzt das Menü hingegen nicht ganz rechts, sondern weist wieder die bereits erwähnten ca. 45px zum rechten Ende hin auf.

Ich vermute, dass dies der Abstand zwischen den Menüpunkten ist!?

Die Frage: wie lässt sich das Menü denn aber tatsächlich zentrieren!? Also (bis vllt. auf einen Ausgleichspixel) pixelgenau nach links und rechts!?

Vielen Dank

Besten Dank für das "Willkommen"! :)

Darf ich so frei sein und dir die URL per PN zukommen lassen!? Ich würde diese aus versch. Gründen nur ungern öffentlich posten.

Danke & Grüße

Danke für Eure Antworten.

Na dann will ich mal versuchen, das Ganze weiter zu präzisieren. Auf "Privatsupport" hatte ich es natürlich nicht abgesehen. ;-)
Die WP Installation um die es geht ist unter http://creamotive.de zu finden.

Folgende Menu / Navigation Code-Schnipsel habe ich in der Child-Theme-CSS angepasst:

.main-navigation ul.nav-menu,.main-navigation div.nav-menu > ul {
    border-bottom: 1px solid #555;
    border-top: 1px solid #555;
    display: inline-block !important;
    background-color: #191919;
    background-image: url(own-imgs/bg_textfields_gradient.png);
    background-repeat: repeat-x;
    text-align: center;
    width: 100%;
}

.main-navigation li a {
        border-bottom: 0;
        color: #fff;
        line-height: 3.692307692;
        text-transform: uppercase;
        white-space: nowrap;
}
.main-navigation li a:hover {
        color: #ffa423;
}




.main-navigation ul li:hover > ul {
        border-top: 1px solid #555;
        display: block;
}

.main-navigation li ul li a {
    background-color: #191919;
    border-bottom: 1px solid #555;
    display: block;
    font-size: 11px;
    font-size: 0.785714286rem;
    text-align: left;
    line-height: 2.181818182;
    padding: 8px 10px;
    padding: 0.571428571rem 0.714285714rem;
    width: 150px;
    width: 10.714285714rem;
    white-space: normal;
}
.main-navigation li ul li a:hover {
    background-color: #141414;
    background-image: url(own-imgs/bg_textfields_gradient.png);
    background-repeat: repeat-x;
    color: #ffa423;
}

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
        color: #ffa423;
        font-weight: normal !important;
}

Die Antwort von koslowski verstehe ich leider noch nicht erschöpfend. :smile:

Danke & viele Grüße

Absolut perfekt! Vielen Dank für die flotte Hilfe. Das hat wirklich pixelgenau funktioniert. Da habe ich dann wirklich an der falschen Stelle gesucht.

Eine kleine Ergänzung, weils mir gerade erst aufgefallen ist: die Navigation wird nun zwar wunderbar mittig dargestellt, das Untermenü ist dadurch aber auch um 20px nach rechts verschoben und beginnt nicht mehr linksbündig mit dem Navigationspunkt.

Ich habe gerade einfach mal versucht, dem Untermenü mit margin-left: 0px; nach links zu verhelfen - allerdings ohne Erfolg.

Mit dem Code klappt es prima - vielen Dank!