Wie zentriere ich eine ungeordnete Liste (``) innerhalb eines Div?

Wie richtet man ul horizontal an der Mitte eines div aus?

Wenn man mit CSS eine ungeordnete Liste (

) innerhalb eines div zentrieren muss, gibt es mehrere Lösungen zur Bewältigung dieser Herausforderung. Hier ist eine Aufschlüsselung des bereitgestellten CSS und der vorgeschlagenen Methoden, um das gewünschte Ergebnis zu erzielen:

Das angegebene CSS:

.container { 
    clear: both; 
    width: 800px; 
    height: 70px; 
    margin-bottom: 10px;
    text-align: center;
}

.container ul { 
    padding-left: 20px; 
    margin: 0; 
    list-style: none;
}

.container ul li { 
    margin: 0; 
    padding: 0; 
}

Mit der Eigenschaft text-align: center; Auf .container angewendet, scheint es, als ob Sie darauf abzielen, alles innerhalb des Containers zu zentrieren, einschließlich der Ul. Diese Eigenschaft richtet jedoch nur den Textinhalt eines Elements aus, nicht das Element selbst.

Hier sind einige Ansätze, um Ihr ul innerhalb des div horizontal zu zentrieren:

Lösung 1: Verwenden margin's auto:

Diese Methode beinhaltet das Festlegen des Randes: 0 auto; auf der ul, sodass die Ränder symmetrisch angewendet werden können und es effektiv in der Mitte platziert wird:

.container ul {
    margin: 0 auto;
}

Lösung 2: Verwendung von display:table;:

Dies Die Lösung nutzt den Tabellenrenderingmodus der Anzeigeeigenschaft. Durch Einstellen der Anzeige: Tabelle; Auf der UL verwandeln Sie es in einen Tischcontainer. Dann margin: 0 auto; zentriert das ul innerhalb des div auf die gleiche Weise wie in Lösung 1:

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

Lösung 3: Implementierung von text-align: center; und inline-block:

Diese Methode nutzt die Anzeige: inline-block; Grundstück an der Ul. In Kombination mit text-align: center; Auf dem übergeordneten Container wird die UL als Inline-Element im Textfluss in der Mitte platziert:

.container { 
    text-align: center;
}

.container ul { 
    display: inline-block;
}

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