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>

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

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.

Edit: 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?

回答1:

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

回答2:

The solution that worked for me:

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

来源：https://stackoverflow.com/questions/16428944/centering-multiline-floated-elements