How to Center Floated Divs in a Container

Question

Is it possible to center floated divs in a container and if so how?

For example I have a page with a container div containing lots of variable sized (dynamically generated) floated (left) divs. The divs overflow onto the next line reguarly but they are never centered in the container div, instead alined with the left. It looks like this:

----------------------------
-                          -
- +++  +++++  ++++  ++     -
- +++  +++++  ++++  ++     -
-                          -
- ++   ++++++  +++  +      -
- ++   ++++++  +++  +      -
-                          -
----------------------------

Whereas I would like the floated divs centered in the container like this:

----------------------------
-                          -
-   +++  +++++  ++++  ++   -
-   +++  +++++  ++++  ++   -
-                          -
-   ++   ++++++  +++  +    -
-   ++   ++++++  +++  +    -
-                          -
----------------------------

Thanks,

DLiKS

Answer 1

It is possible. Using http://www.pmob.co.uk/pob/centred-float.htm and http://css-discuss.incutio.com/wiki/Centering_Block_Element as a source.

Here is a fiddle demonstrating the concept, using the HTML and CSS from below: https://jsfiddle.net/t9qw8m5x/

<div id="outer">
    <ul id="inner">
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2 with long text</a></li>
        <li><a href="#">Button 3</a></li>
    </ul>
</div>

This is the minimum CSS needed for the effect:

#outer {
    float: right;
    position: relative;
    left: -50%;
}

#inner {
    position: relative;
    left: 50%; 
}

#inner > li {
    float: left;
}

Explanation:

Start off with just the li { float: left; } rule. Then wrap those floats in the left: 50%; relative position, so the left edge of the <ul>'s box is in the horizontal centre of the page, then use the rules in #outer to correctly adjust it so the centre of #inner is aligned with the page.