Probleme mit der Zentrierung des Top-Menüs

    Hallo!

    Selbst nach dem Lesen mehrerer Posts und zahlreichen Versuchen will es mir nicht glücken das Top-Menü auf meiner Seite zu zentrieren. Siehe auch Screenshot.

    Kann jemand helfen?

    Vielen Dank im Voraus!


    P.S. Falls ein Administrator das hier liest: Es gibt einen Beitrag bzgl. dem Thema den man evtl. löschen kann, weil er keinerlei hilfreiche Information enthält http://forum.wpde.org/design/158123-menue-zentrieren.html

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Zitat von Param

    Selbst nach dem Lesen mehrerer Posts und zahlreichen Versuchen will es mir nicht glücken


    Poste doch mal Deine zahlreichen Versuche, dann kann man Dir ggf. generell beim Ansatz bzgl. der vielen CSS-Probleme helfen.

    Code
    #top-menu {
    text-align: center;
}

    1000 Dank! Ich war die ganze Zeit auf der Suche nach diesem einfachen Code! Funktioniert auf den ersten Blick einwandfrei!

    Auch wenn es jetzt eigentlich nicht mehr notwendig ist, aber da Du mich darum batest - einige der Versuche, bei welchen ich nicht verstehe warum sie so kompliziert sind?

    Code
    [COLOR=#0C2233][FONT=&amp]@media screen and (min-width: 981px) {    .menu {        text-align:center    }    .menu li {        display:inline-block;        float:none;        margin-left: -5px;    }    .menu li li {        display:block;        text-align:left    }}[/FONT][/COLOR]
    Code
    [COLOR=#666666][FONT=Inconsolata]@media (min-width: 768px) {  .navbar-nav {    float: none;    padding: auto;  }  .nav {    padding-left: 10%;  }}[/FONT][/COLOR]
    Code
    [COLOR=#888888][FONT=monospace]@media screen and (min-width: 601px) {.main-navigation {    text-align: center;}.main-navigation ul {    display: inline-block;}}[/FONT][/COLOR]
    Code
    [COLOR=#2F9C0A][FONT=Consolas].navbar-inner[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]{[/FONT][/COLOR][COLOR=#C92C2C][FONT=Consolas]padding-right[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]:[/FONT][/COLOR][COLOR=#000000][FONT=Consolas] 5px[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas];[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]}[/FONT][/COLOR][COLOR=#2F9C0A][FONT=Consolas].tc-header .nav-collapse[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]{[/FONT][/COLOR][COLOR=#C92C2C][FONT=Consolas]float[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]:[/FONT][/COLOR][COLOR=#000000][FONT=Consolas] none[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas];[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]}[/FONT][/COLOR][COLOR=#2F9C0A][FONT=Consolas].navbar .nav[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]{[/FONT][/COLOR][COLOR=#C92C2C][FONT=Consolas]width[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]:[/FONT][/COLOR][COLOR=#000000][FONT=Consolas] 100%[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas];[/FONT][/COLOR][COLOR=#C92C2C][FONT=Consolas]text-align[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]:[/FONT][/COLOR][COLOR=#000000][FONT=Consolas] center[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas];[/FONT][/COLOR][COLOR=#C92C2C][FONT=Consolas]-webkit-box-sizing[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]:[/FONT][/COLOR][COLOR=#000000][FONT=Consolas] border-box[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas];[/FONT][/COLOR][COLOR=#C92C2C][FONT=Consolas]-moz-box-sizing[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]:[/FONT][/COLOR][COLOR=#000000][FONT=Consolas] border-box[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas];[/FONT][/COLOR][COLOR=#C92C2C][FONT=Consolas]box-sizing[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]:[/FONT][/COLOR][COLOR=#000000][FONT=Consolas] border-box[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas];[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]}[/FONT][/COLOR][COLOR=#2F9C0A][FONT=Consolas].nav-collapse .nav > li[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]{[/FONT][/COLOR][COLOR=#C92C2C][FONT=Consolas]float[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]:[/FONT][/COLOR][COLOR=#000000][FONT=Consolas] none[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas];[/FONT][/COLOR][COLOR=#C92C2C][FONT=Consolas]display[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]:[/FONT][/COLOR][COLOR=#000000][FONT=Consolas] inline-block[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas];[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]}[/FONT][/COLOR][COLOR=#2F9C0A][FONT=Consolas].nav-collapse .nav > li li[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]{[/FONT][/COLOR][COLOR=#C92C2C][FONT=Consolas]text-align[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]:[/FONT][/COLOR][COLOR=#000000][FONT=Consolas] left[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas];[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]}[/FONT][/COLOR][COLOR=#1990B8][FONT=Consolas]@media [COLOR=#5F6364]([/COLOR][COLOR=#C92C2C]max-width[/COLOR][COLOR=#5F6364]:[/COLOR] 979px[COLOR=#5F6364])[/COLOR][/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]{[/FONT][/COLOR][COLOR=#2F9C0A][FONT=Consolas].nav-collapse .nav > li[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]{[/FONT][/COLOR][COLOR=#C92C2C][FONT=Consolas]display[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]:[/FONT][/COLOR][COLOR=#000000][FONT=Consolas] list-item[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas];[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]}[/FONT][/COLOR][COLOR=#5F6364][FONT=Consolas]}[/FONT][/COLOR]
    Code
    [COLOR=#000000][FONT=Inconsolata]@media screen and (min-width: 783px) {.primary-navigation {    float: none;    margin-left: 0;}.primary-navigation .nav-menu {    display: flex;    justify-content: space-between;}.primary-navigation a {    padding: 0 6px;}}[/FONT][/COLOR]

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden