Html 居中多行浮动图元

我已经尝试/寻找了一段时间，但我无法使它工作

<div class="wrapper">
    <div class="project-container">
        <ul>
            <li><div class="project-box"></div></li>
            <li><div class="project-box"></div></li>
            <li><div class="project-box"></div></li>
        </ul>
    </div>
</div>

我按照下面的解释（）设法将浮动元素（如这里）居中

但是，如果浮动图元必须占用多条直线，因为它们不适合于一条直线（例如，当有超过9个“li”时，或当窗口拉伸时），则它们不再居中

编辑：我希望它是响应，而不是一个固定的宽度

如何使多行浮动元素居中？

---

有没有其他建议/更好的方法来制作一个灵活的宽度/响应网格？

只需设置所有Div而不是Float:left；只需放置显示：内联块；它将把每个元素一个接一个地放在一起。然后只需将包装设置为margin:0 auto

.project-box { 
display: inline-block;
}

.wrapper {
width: 1024px;
height: auto;
margin: 0 auto;
}

---

对我有效的解决方案是：

<style>
    .project-container {
        /* To center the list */
        text-align: center;
    }

    ul {
        /* To reset 'text-align' to the default */
        text-align: left;

        display: inline;
    }

    li,
    .project-box {
        display: inline-block;
    }
</style>

.项目容器{
/*将列表居中*/
文本对齐：居中；
}
保险商实验室{
/*将“文本对齐”重置为默认值*/
文本对齐：左对齐；
显示：内联；
}
锂，
.项目箱{
显示：内联块；
}

例如，如果有9个

。像这样？我应该说得更具体些。我希望它是灵敏的，而不是固定的宽度。如果一个元素因为不适合当前行而必须向下移动到下一行，它应该向下移动。好的，我想我终于找到了答案，但是这些项不再浮动了。。。我要试试看。如果您希望这是响应，将宽度设置为100%，然后设置边距以分隔2个div。Tada Responsive我必须添加“文本对齐：居中；”不过，这是包装纸。