Centrer les puces sur une liste centrée

Question

Exemple - http://jstn.info/html.html - lien pourriture, exemple plus disponible.

Notez que le texte est centré, mais que les puces elles-mêmes ne le sont pas. Comment puis-je aligner les puces tout en maintenant le texte/la liste centrés?

Answer 1

Vous avez posé la même question à Centrer <UL> + Garder <LI> aligné et je vous ai déjà répondu. 

Donnez à votre div un nom de classe center. En supposant que votre largeur div soit 200px, margin:0 auto sera centré et text-align:left alignera le texte à gauche tout en conservant son centrage en raison de la marge automatique. 

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

Consultez l'exemple de travail sur http://jsfiddle.net/8mHeh/1/

Answer 2

Veuillez consulter https://stackoverflow.com/a/6558833/507421

ul {
    list-style-position: inside;
}

Answer 3

Le problème est que les puces sont contrôlées par la variable ul et non par la variable lis. Je ne connais pas de façon propre de le faire par cœur; comme un hack rapide, essayez

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

Edit: comme le souligne l’utilisateur situé au-dessus de moi, vous devriez être centré sur la feuille de style plutôt que sur align.

Pour clarifier, ce que nous avons réellement fait ici est masqué les puces générées automatiquement (en définissant list-style-type sur `none) et crée des" pseudo-puces "devant chaque li.

Answer 4

Il existe de nombreuses façons de résoudre ce problème en fonction des besoins de l'interface utilisateur de votre projet.

J'ai énuméré 3 solutions possibles ici: https://codesandbox.io/s/r1j95pryn

Balles Centrées

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

Balles alignées à gauche avec texte centré

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

Liste centrée avec texte aligné à gauche

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

Visuels