Coloque las cajas en el centro, pero alinee la última fila hacia la izquierda.
No encuentro cómo colocar cajas en el centro, sino alinearlas hacia la izquierda. Parece que ulel ancho no se ajusta al contenido y no es posible configurarlo automáticamente sino manualmente. Pero no quiero configurarlo manualmente porque mi contenido cambia dinámicamente. Entonces necesito que los cuadros estén centrados pero alineados a la izquierda sin cambios manuales ni secuencias de comandos.
No centrado pero alineado a la izquierda:
div {
padding: 20px;
width: 200px;
background-color: green;
text-align: center;
}
ul {
list-style:none;
padding: 0;
margin: 0;
text-align: left;
}
ul li {
width: 40px;
height: 40px;
background-color: wheat;
display: inline-block
}<html>
<head></head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>Expandir fragmento
Aceptado
La cuadrícula CSS puede hacerlo. Cambie el tamaño del div para ver el resultado:
div {
padding: 20px;
width: 200px;
border: 1px solid;
overflow: hidden;
resize: horizontal;
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, 40px); /* width of elements here */
grid-auto-rows: 40px; /* height here */
grid-gap: 4px;
justify-content: center; /* this will do the magic */
}
ul li {
background-color: wheat;
}<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>Expandir fragmento
