使多行浮动元素居中 [英] Centering multiline floated elements

问题描述

我已经尝试/搜索了一段时间，但无法使其正常工作。

I've been trying/searching for a while, but I can't make it work.

<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/horizo​​ntally-centering-content-dynamic -width-css ）。

I managed to center floated elements (like in here http://jsfiddle.net/z7pqP/2/) following this explanation (http://solstice.co.il/blog/2008-02-26/horizontally-centering-content-dynamic-width-css).

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

However, if the floated elements must occupy more than one line, because they don't fit in a single line, (when there are more than 9 'li', for example, or when the window gets stretched), they are no longer centered.

编辑：我希望它能够响应，而不是固定宽度。

I want it to be responsive, not a fixed width.

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

How could I keep multiline floated elements centered? Any other suggestion/better way to make a flexible width/responsive grid?

推荐答案

只需在所有Div上设置而不是Float：left;只是显示：inline-block;它将每个元素一个接一个地放置。然后只需将包装器设置为margin：0自动；。

Just set on all your Div instead of Float:left; just put display: inline-block; it will put each element one after the other. Then just set your wrapper to be margin: 0 auto;.

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

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

这篇关于使多行浮动元素居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！