Menu
I can't find how to place boxes in the center but align it to left. It seems that ul has width fit not to content, and it is not possible to set it automatically but manually. But I don't want to set it manually, because my content changes dynamically. So I need boxes to be centered but aligned left with no manual changes and no scripts.
Not centered but aligned left:
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>
246
asked Nov 15 '25 17:11
CSS grid can do it. Resize the div to see the result:
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
