3

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

<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/horizo ​​ntally - centering -content -动态宽度CSS）。

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

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

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

4

2 回答 2

4

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

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

.wrapper {
width: 1024px;
height: auto;
margin: 0 auto;
}
于 2013-05-07T21:47:40.370 回答
0

对我有用的解决方案：

<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>
于 2014-07-13T18:53:54.387 回答