Wie zentriert man ein horizontales Menü und seine Listenelemente perfekt?

Zentrieren eines horizontalen

Menü

Problem:

Ein horizontales Menü, das aus einer ungeordneten Liste (

) besteht, muss innerhalb eines Containers <div> zentriert werden. Während Versuche, die
innerhalb des <div> erfolgreich waren, bleiben die einzelnen Listenelemente (
• ) linksbündig innerhalb des
  .

  Lösung:

  Um eine perfekte Zentrierung zu erreichen Sowohl die

  und seinen Listenelementen wird der folgende Ansatz empfohlen:
  1. Float Wrapper: Erstellen Sie einen Float-Left-Wrapper um das
     und setzen Sie seine Position auf „relativ“ mit einem negativen linken Offset. Dadurch wird der Wrapper links außerhalb des Bildschirms positioniert.
     • Umgekehrtes verschachteltes Element: Positionieren Sie das innere
       innerhalb des Wrappers mit „position: relative“ und einem positiven linken Offset von 50 %. Dadurch wird das
       genau in der Mitte des Wrappers.
       • Float-Listenelemente: Passen Sie das
       • an. Elemente, die innerhalb des
         nach links schweben sollen. und ihre Position innerhalb der
         unter Verwendung von „Position: relativ“.

  Codebeispiel:

  #buttons {
    float: right;
    position: relative;
    left: -50%;
    text-align: left;
  }
  
  #buttons ul {
    list-style: none;
    position: relative;
    left: 50%;
  }
  
  #buttons li {
    float: left;
    position: relative;
  }

  HTML-Beispiel:

  <div>

  Mit dieser Implementierung wird das Menü perfekt zentriert, wobei die Listenelemente gleichmäßig im horizontalen Raum verteilt sind.

  Das obige ist der detaillierte Inhalt vonWie zentriert man ein horizontales Menü und seine Listenelemente perfekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!