it-swarm.com.de

Zentrieren von Aufzählungszeichen in einer zentrierten Liste

Beispiel - http://jstn.info/html.html - link rot, Beispiel nicht mehr verfügbar.

Beachten Sie, dass der Text zentriert ist, die Aufzählungspunkte selbst jedoch nicht. Wie kann ich die Aufzählungspunkte ausrichten, während der Text/die Liste zentriert bleibt?

22
CenterMe

Sie haben die gleiche Frage an Centering <UL> + Behalten <LI> s Aligned gestellt und ich habe Sie bereits beantwortet. 

Geben Sie Ihrem Div einen Klassennamen center. Angenommen, Ihre Div-Breite ist 200px, zentriert sich margin:0 auto und text-align:left richtet den Text nach links aus, wobei die Zentrierung aufgrund des Randbereichs automatisch beibehalten wird. 

.center{
    width:200px;
    margin:0 auto;
    text-align:left;
}

Überprüfen Sie das Arbeitsbeispiel unter http://jsfiddle.net/8mHeh/1/

8
Hussein

Siehe https://stackoverflow.com/a/6558833/507421

ul {
    list-style-position: inside;
}
130
Davious

Das Problem ist, dass die Aufzählungszeichen von ul und nicht von den einzelnen lis gesteuert werden. Ich kenne keinen sauberen Weg, dies von meinem Kopf aus zu tun. Versuchen Sie es als schnellen Hack

ul { list-style-type: none; text-align: center; }
li::before { content: "\2022 " }
/* 0x2022 is unicode for a bullet */

Bearbeiten: Wie der Benutzer oben zeigt, sollten Sie sich im Stylesheet und nicht mit align zentrieren.

Um zu klären, was wir hier wirklich gemacht haben, ist das Verborgen der automatisch generierten Aufzählungszeichen (durch Setzen von list-style-type auf `none) und Erstellen von" Pseudo-Aufzählungszeichen "vor jedem Li.

7
Jacob

Es gibt mehrere Möglichkeiten, dies zu lösen, je nach den Anforderungen der Benutzeroberfläche Ihres Projekts.

Ich habe hier 3 mögliche Lösungen aufgelistet: https://codesandbox.io/s/r1j95pryn

Zentrierte Kugeln

ul {
    list-style-position: inside;
    padding-left: 0;
}

Links ausgerichtete Aufzählungszeichen mit zentriertem Text

ul {
    display: inline-block;
    padding-left: 0;
}

Zentrierte Liste mit linksbündigem Text

ul {
    display: inline-block;
    padding-left: 0;
    text-align: left;
}

Visuals

 enter image description here

0
Sawtaytoes