Centre alignant une liste non ordonnée avec des balles en bootstrap

Voici le code qui pourrait résoudre le problème pour vous:

<div class="text-center">
   <ul>
     <li>This</li>
     <li>is</li>
     <li>my</li>
     <li>list</li>
   </ul>
</div>

Vous pouvez utiliser flex fort> pour atteindre cet objectif:

p>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="custom-center">
<ul class="text-center">
  <li class="text-center">This</li>
  <li>is</li>
  <li>my</li>
  <li>list</li>
</ul>
</div>

Vous avez deux options, essentiellement, le problème est que les balles font partie de l'élément ul et donc rendus au début de chaque nouvelle ligne et ne sont pas associés au LI. Étant donné que même si vous obtenez la liste centrée sur la liste, les balles seront alignées ensemble et ne sont pas relatives à la longueur de votre élément de liste.

J'ai copié votre code d'en haut. Et comme vous pouvez le constater, en ajoutant un élément wrapper avec flex code> et pour définir la marge gauche / droite mx-auto code> sur l'élément UL. Cependant, cela obtient la question décrite ci-dessus dans laquelle les points sont tous alignés mais centrés, mais par rapport à la ligne la plus longue. P>

p>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="d-flex">
    <ul class="text-center mx-auto">
      <li class="text-center">This</li>
      <li>is</li>
      <li>my</li>
      <li>list</li>
      <li>a bit longer item</li>
    </ul>
</div>

changez votre code dans cet

html: xxx

css: xxx

table d'affichage se soucie de La taille de la boîte basée sur la valeur intérieure et la marge automatique a centralisé la section.

Vous pouvez utiliser la propriété style-style code> Propriété: xxx pré>

p>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<ul class="text-center">
  <li>This</li>
  <li>is</li>
  <li>my</li>
  <li>list</li>
</ul>