Wie zentriere ich eine Liste horizontal innerhalb eines Div?

So zentrieren Sie eine Liste innerhalb eines Divs

Oft ist es wünschenswert, eine Liste von Elementen innerhalb eines Divs mit fester Breite zu zentrieren. Dies kann durch eine Kombination aus HTML- und CSS-Techniken erreicht werden.

Lösung:

Um die Liste und ihre untergeordneten Elemente zu zentrieren, führen wir die folgenden Schritte aus:

1. Umschließen Sie die Liste in ein Div mit text-align: center;.
2. Set display: inline-block; auf der Liste, um sie innerhalb des Div zu zentrieren.
3. Legen Sie geeignete Ränder und Abstände für die Liste und ihre Elemente fest, um das gewünschte Ergebnis zu erzielen Abstand.

Code:

<div class="wrapper">
    <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
    </ul>
</div>

.wrapper {
    text-align: center;
}

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

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

Erklärung:

• Der Wrapper div zentriert die Liste horizontal.
• Die Inline-Block-Anzeige auf der Liste positioniert sie innerhalb des div auch horizontal.
• Die Ränder und der Abstand auf der Liste und den Listenelementen passen den Abstand und das Erscheinungsbild der Elemente an.

Durch Befolgen dieser Schritte können Sie eine Liste effektiv darin zentrieren ein div, das ein ausgewogenes und optisch ansprechendes Layout gewährleistet.

Das obige ist der detaillierte Inhalt vonWie zentriere ich eine Liste horizontal innerhalb eines Div?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!