Centre alineando una lista desordenada con viñetas en Bootstrap

Question

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?

html css twitter-bootstrap

0

user1584421 1 oct. 2019 a las 23:39

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Centre alineando una lista desordenada con viñetas en Bootstrap

5 respuestas

Nuevas preguntas

html