Centering multiline floated elements

Question

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?

I should have been more specific. I want it to be responsive, not a fixed width. If an element has to go down to the following row/line because it doesn't fit the current one, it should go down. — David Da Silva Contín, May 07 '13 at 21:44
Okay, I think I've finally found the answer, but the items are not floated anymore... I'm going to try it. http://stackoverflow.com/questions/3913383/multiple-centered-floating-divs-in-a-liquid-layout?rq=1 — David Da Silva Contín, May 07 '13 at 21:46

score 4 · Accepted Answer · answered May 07 '13 at 21:47

4

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

answered May 07 '13 at 21:47

Cam

1,884
11
24

If you want this to be responsive, set the widths to be 100% and then margin to separate the 2 divs. Tada responsive – Cam May 07 '13 at 21:55
I had to add 'text-align:center;' to the wrapper, though. – David Da Silva Contín May 07 '13 at 22:00

score 0 · Answer 2 · answered Jul 13 '14 at 18:53

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>

Centering multiline floated elements

2 Answers2

Linked