web-dev-qa-db-fra.com

comment puis-je centrer le texte sur les points de balle d'un <ul>

Lorsque j'essaie de centrer un <ul>, le texte dans le <li> se centre mais les puces restent à l'extrême gauche de la page. Existe-t-il un moyen de garder les points centrés sur le texte lorsqu'il est centré?

#abc{text-align: center; }

<div id="section1">
<div id="abc">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div/>
<div/>
htmlcsshtml-lists
14
a person

Ajoutez list-style-position: inside à l'élément ul. (Exemple)

La valeur par défaut de la propriété list-style-position est outside.

ul {
    text-align: center;
    list-style-position: inside;
}
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

Une autre option (qui donne des résultats légèrement différents) consisterait à centrer l’intégralité de l’élément ul:

.parent {
  text-align: center;
}
.parent > ul {
  display: inline-block;
}
<div class="parent">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</div>

23
Josh Crozier

Vous pouvez le faire avec list-style-position: inside; sur l'élément ul:

ul {
    list-style-position: inside;
}

Voir travail du violon

12
Michael P. Bazos

J'ai trouvé la réponse aujourd'hui. Peut-être que c'est trop tard mais je pense que c'est un bien meilleur. Cochez cette/ https://jsfiddle.net/Amar_newDev/khb2oyru/5/

Essayez de changer le code CSS: <ul> max-width:1%; margin:auto; text-align:left; </ul>

max-width: 80% ou quelque chose comme ça.

Essayez d'expérimenter, vous pourriez trouver quelque chose de nouveau.

1
Amar Parajuli