So zentrieren Sie eine ungeordnete Liste ohne übergeordnetes DIV

In CSS zentrieren Sie eine ungeordnete Liste (

) unter Beibehaltung der Links- Ausgerichtete Listenelemente können ohne Verwendung eines übergeordneten Div eine Herausforderung sein. So erzielen Sie diesen Effekt:

Der bereitgestellte Codeausschnitt mit einem übergeordneten Div verwendet text-align: center auf dem div und display: inline-block auf dem ul, um die Liste zu zentrieren. Diese Methode erfordert jedoch einen übergeordneten Div-Wrapper.

Um eine ungeordnete Liste ohne übergeordnetes Div zu zentrieren, können CSS-Eigenschaften wie „margin“ und „text-align“ nicht effektiv verwendet werden, da

keine feste Breite hat .

Die Lösung besteht darin, das

mithilfe von display:table so einzustellen, dass es sich wie eine Tabelle verhält. Dadurch entsteht eine tabellenartige Struktur, in der Zeilen durch Listenelemente (
• ) definiert werden. Durch Festlegen von margin: 0 auto für
  wird die Tabelle (d. h. die Liste) innerhalb ihres enthaltenden Elements zentriert.

  Hier ist der CSS-Code, der diesen Effekt erzielt:

  ul {
    display: table;
    margin: 0 auto;
  }

  Zur Veranschaulichung hier ein Codeausschnitt, der den bereitgestellten HTML-Code verwendet, jedoch kein übergeordnetes Div:

  
  
  
    
  56456456
      
  4564564564564649999999999999999999999999999996
      
  45645
    

  Dieser Code zentriert die ungeordnete Liste auf der Seite, während die Listenelemente weiterhin linksbündig bleiben.