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?
5 respuestas
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.
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>
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>
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>
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.
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].