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>
