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/），我设法将浮动元素（例如此处http://solstice.co.il/blog/2008-02-26/horizontally-centering-content-dynamic-width-css）居中。

但是，如果浮动元素必须占用多行，因为它们不适合单行，（例如，当超过9'li'时，或者当窗口被拉伸时），不再居中。

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

我怎样才能让多行浮动元素居中？任何其他建议/更好的方法来制作灵活的宽度/响应网格？

Answer 1

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

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

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

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

居中多线浮动元素

2 个答案: