居中多行浮动元素答案

【问题标题】：Centering multiline floated elements居中多行浮动元素
【发布时间】：2013-05-01 23:47:02
【问题描述】：

我已经尝试/搜索了一段时间，但我无法成功。

<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://solstice.co.il/blog/2008-02-26/horizontally-centering-content-dynamic-width-css)，我设法使浮动元素居中（就像这里的 http://jsfiddle.net/z7pqP/2/）。

但是，如果浮动元素必须占据多于一行，因为它们不能容纳在一行中，（例如，当有超过 9 个 'li' 时，或者当窗口被拉伸时），它们不再居中。

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

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

【问题讨论】：

例如当有 9 个
.

【解决方案1】：

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

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

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

【讨论】：

如果您希望它具有响应性，请将宽度设置为 100%，然后设置边距以分隔 2 个 div。多田响应
我必须添加 'text-align:center;'不过，到包装器。

【解决方案2】：

对我有用的解决方案：

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

【讨论】：