html - 居中多行 float 元素

Question

我已经尝试/搜索了一段时间，但我无法让它发挥作用。

<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>

按照这个解释 ( http://jsfiddle.net/z7pqP/2/ )，我设法使 float 元素居中(就像这里的 http://solstice.co.il/blog/2008-02-26/horizontally-centering-content-dynamic-width-css )。

但是，如果 float 元素必须占据多行，因为它们不能放在一行中(例如，当超过 9 个“li”，或者当窗口被拉伸(stretch)时)，它们不再居中。

编辑:我希望它具有响应性，而不是固定宽度。

如何让多行 float 元素居中？ 还有其他建议/更好的方法来制作灵活的宽度/响应式网格吗？

Answer 1

只需在所有 Div 上设置而不是 Float:left；只需放置 display: inline-block;它会将每个元素一个接一个地放置。然后只需将包装器设置为 margin: 0 auto;.

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

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