Wie zentriere ich eine ungeordnete Liste in einem Div mit fester Breite?

So zentrieren Sie eine ungeordnete Liste innerhalb eines DIV mit fester Breite

Bei der Arbeit mit Webdesign kann das vertikale und horizontale Ausrichten von Elementen eine häufige Aufgabe sein. Ein solches Szenario ist das Zentrieren einer ungeordneten Liste (

) innerhalb eines Divs mit fester Breite.

Lösung

Um eine zentrierte Ausrichtung zu erreichen, ist eine Kombination aus CSS-Anzeigeeigenschaften und Umbruchelementen innerhalb eines Es wird ein zentriertes Div verwendet.

Erstellen Sie zunächst ein Wrapper-Div und wenden Sie die Eigenschaft „text-align: center“ darauf an. Dadurch wird der Inhalt innerhalb des Div horizontal zentriert.

Als nächstes wickeln Sie das

ein. Element innerhalb des zentrierten div und wenden Sie die folgenden CSS-Eigenschaften an:

.wrapper ul {
    display: inline-block;
    margin: 0;
    padding: 0;
}

• display: inline-block;: Diese Eigenschaft ermöglicht es dem
  um sich wie ein Inline-Element zu verhalten und dennoch eine feste Breite einzunehmen.
  • margin: 0; und Polsterung: 0;: Diese Eigenschaften entfernen alle standardmäßigen Ränder oder Polsterungen, die auf das
    angewendet werden.

    Um schließlich das

  • zu zentrieren; Elemente innerhalb von
    verwenden Sie die folgende CSS-Eigenschaft:

    .wrapper li {
        float: left;
        padding: 2px 5px;
        border: 1px solid black;
    }

    • float: left;: Diese Eigenschaft erstellt ein Inline-Layout für das
    • Elemente.
    • Auffüllung: 2px 5px; und Rand: 1 Pixel einfarbig schwarz; (optional): Passen Sie diese Werte an, um den
    • -Stil zu gestalten. Elemente nach Wunsch.

    Durch die Kombination dieser CSS-Techniken können die

    und sein
    • Elemente werden innerhalb des Divs mit fester Breite zentriert und sorgen so für eine optisch ansprechende Ausrichtung.

      Das obige ist der detaillierte Inhalt vonWie zentriere ich eine ungeordnete Liste in einem Div mit fester Breite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!