Quiero centrar alinear una lista desordenada en Bootstrap - se incluyen viñetas

ul {
  list-style-type: disc !important;
  padding-left: 1em !important;
  margin-left: 1em;
}
<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 class="text-center">This</li>
  <li>is</li>
  <li>my</li>
  <li>list</li>
</ul>

Desafortunadamente, con ambos class= "text-center", el texto de la lista está alineado centrado, pero las viñetas están atascadas en la parte izquierda de la pantalla.

¿Cómo hago que las balas se centren alineadas también?

0
user1584421 1 oct. 2019 a las 23:39

5 respuestas

La mejor respuesta

Cambia tu código a esto

Html:

<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>
  <li>This</li>
  <li>is</li>
  <li>my</li>
  <li>list</li>
</ul>

Css:

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

La tabla de visualización se preocupará por el tamaño del cuadro según el valor interno y el margen automático centralizará la sección.

1
Sayedur Rahman 1 oct. 2019 a las 21:14

Puede usar flex para lograr esto:

.custom-center {
  display: flex;
  align-items: center;
  flex-direction: column;
}

ul {
  list-style-type: disc !important;
  padding-left: 1em !important;
  margin-left: 1em;
}
<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>
1
cccn 1 oct. 2019 a las 20:50

Puede usar la propiedad list-style-position:

list-style-position: inside;
ul {
  list-style-type: disc !important;
  padding-left: 1em !important;
  margin-left: 1em;
}
li {
list-style-position: inside;
}
<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>
2
Michelle Cantin 1 oct. 2019 a las 23:30

Aquí está el código que podría resolver el problema por usted:

<div class="text-center">
   <ul>
     <li>This</li>
     <li>is</li>
     <li>my</li>
     <li>list</li>
   </ul>
</div>
-1
Salman Malik 1 oct. 2019 a las 20:45

Tiene dos opciones, esencialmente el problema es que las viñetas son parte del elemento ul y, por lo tanto, se representan al comienzo de cada nueva línea y no están asociadas con el li. Debido a esto, incluso si obtiene la lista centrada, las viñetas se alinearán juntas y no en relación con la longitud de su elemento de la lista.

Copié tu código de arriba. Y como puede ver, agregando un elemento contenedor con flex y estableciendo el margen izquierda / derecha mx-auto en el elemento ul. Sin embargo, esto genera el problema descrito anteriormente donde los puntos están todos alineados pero centrados, pero en relación con la línea más larga.

ul {
  list-style-type: disc !important;
  padding-left: 1em !important;
  margin-left: 1em;
}
<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>

Otra solución sería utilizar pseudo elementos en los elementos de la lista para crear los puntos y configurar list-style: none para eliminar las viñetas generadas por el navegador.

1
Levidps 1 oct. 2019 a las 20:55