Wie kann man eine ungeordnete Liste horizontal zentrieren, ohne die Ausrichtung der Listenelemente zu beeinträchtigen?

Anpassung der Textausrichtung für ungeordnete Listen erreichen

Hintergrund:
Es ist eine häufige Anforderung, Listen vertikal und/oder horizontal auszurichten. Während die Steuerung der vertikalen Ausrichtung relativ einfach ist, kann es etwas schwieriger sein, eine ungeordnete Liste horizontal auszurichten, ohne die Ausrichtung der einzelnen Listenelemente zu beeinträchtigen.

Die Herausforderung:
In diesem Fall das Ziel besteht darin, eine ungeordnete Liste (

) mit unbekannter Breite zu zentrieren und gleichzeitig die linke Ausrichtung ihrer Listenelemente (
• ) beizubehalten. Dies schließt die Verwendung eines Parent-Div-Wrappers aus, der eine einfache Lösung bieten würde.

  Die Lösung:
  Mit der Eigenschaft „display“ können wir den Wert „table“ für verwenden ungeordnete Liste (

  ). Dadurch wird die Liste als Tabelle festgelegt und ihre Elemente tabellenartig ausgerichtet. Indem wir den Rand automatisch auf 0 setzen, können wir die Tabelle (und damit die Liste) innerhalb ihres übergeordneten Containers zentrieren.

  Code-Implementierung:

  <code class="css">ul {
    display: table;
    margin: 0 auto;
  }</code>

  Diese Änderung Ermöglicht die horizontale Zentrierung der ungeordneten Liste unter Beibehaltung der linken Ausrichtung ihrer einzelnen Listenelemente.

  Das obige ist der detaillierte Inhalt vonWie kann man eine ungeordnete Liste horizontal zentrieren, ohne die Ausrichtung der Listenelemente zu beeinträchtigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!