Susi: Menu zentrieren

Hallo, dieses Menu erfüllt alle meine Wünsche: Linkbeschreibung

Allerdings würde ich die Menüpunkte gerne zentrieren, sie sollen also nicht linksbündig sein, sondern in der Mitte. Float: center; gibt's ja nicht, text-align bringt auch nichts, was muss ich denn machen, damit mein Wunsch in Erfüllung geht?

Vielen Dank!

  1. Hallo Susi,

    Float: center; gibt's ja nicht, text-align bringt auch nichts, was muss ich denn machen, damit mein Wunsch in Erfüllung geht?

    text-align: center für die ul sowie display: inline für die li-Elemente und letztere nicht floaten.

    Bis demnächst
    Matthias

    --
    Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein)
  2. Hallo

    Das liegt am float der Navigation.

    Du kannst diese CSS-Anweisungen

          ul.topnav {
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
             background-color: #333;
          }
          /* Float the list items side by side */
          ul.topnav li {
             float: left;
          }
    

    folgendermaßen ändern:

          ul.topnav {
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
             background-color: #333;
             text-align: center;
          }
          /* Float the list items side by side */
          ul.topnav li {
             /*float: left;*/
             display: inline-block;
          }
    

    und diese CSS-Anweisung

       @media screen and (max-width:680px) {
          ul.topnav li:not(:first-child) {
             display: none;
          }
          ul.topnav li.icon {
             float: right;
             display: inline-block;
          }
       }
    

    folgendermaßen

       @media screen and (max-width:680px) {
          ul.topnav {
             text-align: left;
          }
          ul.topnav li:not(:first-child) {
             display: none;
          }
          ul.topnav li.icon {
             float: right;
             display: inline-block;
          }
       }
    

    Dann sollte es passen.

    Gruss

    MrMurphy

    1. Vielen Dank!!