How do I center align a div that contains floated elements?

Question

I need inner_holder to have width of 960px and I need it to be centered. I tried using width: 960px and margin: 0px auto but it doesn't work. How can I center the divs inside inner_holder?

HTML:

<div class="parent_container">
    <div class="inner_holder">
        <div class="column column1">
            <div class="inner_clip"></div>
        </div>
        <div class="column column2">
            <div class="inner_clip"></div>
        </div>
        <div class="column column3">
            <div class="inner_clip"></div>
        </div>
    </div>
</div>

CSS:

.parent_container {
      height: auto;
      margin: 15px auto;
      min-height: 500px;
      width: 960px;
}
.column {
     float: left;
     margin-right: 50px;
}
.inner_clip {
    background-color: #333333;
    height: 250px;
    margin-bottom: 20px;
    width: 250px;
}

If inner_holder and parent_container both have a width of 960px how will you tell if inner is centered? — j08691, Sep 09 '13 at 18:24
Works [as expected](http://jsfiddle.net/qsmbP/1/), well unless it's the `parent_container` which is centerized, not the `inner_holder` but that doesn't make any difference.. and btw: indent your html, so you will notice a missing `` - and people will be more likely to help you. — RienNeVaPlu͢s, Sep 09 '13 at 18:26
Haven't you try searching over the internet before ? Try google : https://www.google.ca/#q=center%20div%20unknown%20width . Here i picked this one for you : http://css-tricks.com/centering-in-the-unknown/ — Milche Patern, Sep 09 '13 at 18:28
Must be an already good answer for you : http://stackoverflow.com/search?q=centering+div — Milche Patern, Sep 09 '13 at 18:36
@RienNeVaPlus Sorry new to this stuff. I think your fiddle doesn't work... — ariel, Sep 09 '13 at 18:40
@RienNeVaPlus i missed a div style so added it as well. Thanks! — ariel, Sep 09 '13 at 18:42
possible duplicate of [How do I center float elements?](http://stackoverflow.com/questions/4767971/how-do-i-center-float-elements) — Salman A, Nov 22 '14 at 13:31

score 9 · Accepted Answer · answered Sep 09 '13 at 18:59

As you can see here the "div that contains floated elements" is actually in the center (red).

I am assuming you want to center the floating elements themselves, not their parent. I'm afraid you can't do that (as far as I know). But in case you are not depending on your elements actually floating, you propably just want to display your .colum as inline-block with an text-align:center set to the parent.

Changes to your CSS:

.parent_container {
    text-align:center;     // added
}
.column {
    display: inline-block; // added
    margin: 0 25px;        // added
    float: left;           // removed
    margin-right: 50px;    // removed
}

Result as Fiddle

score 0 · Answer 2 · answered Apr 03 '15 at 00:29

I beat my head trying to figure this out forever. The answer above about assigning "display:inline-block" to the elements in the div, and then assigning "text-align: center" to the parent div works BUT BUT BUT... I had a class of "clearfix" on my parent div that apparently was mucking the whole thing up. As soon as I removed that clearfix class everything centered nicely (after hours of futile frustration, of course;). Hope this helps someone.

How do I center align a div that contains floated elements?

2 Answers2