Center align multiple child DIV

css, css-float

Solution

If you want to horizontally align your elements centrally, then don't float them.

Change the way they are displayed to `inline-block` and align them in the center by changing the `text-align` style of their parent:

#parent {
    text-align:center;
    height:450px;
    width:75%;
    border:1px solid blue;
}
.center {
    display:inline-block;
    height:250px;
    width:15%;
    margin: 0 auto;
    border: 1px solid black;
}

<div id="parent">
    <div id="child1" class="center"></div><!--
 --><div id="child2" class="center"></div><!--
 --><div id="child3" class="center"></div>
</div>

Be sure to have no white-space or newlines between your children `<div>`s (in your HTML, that is) or comment it out. Now that these are inline elements, this white-space will be interpreted as a space.

Problem

I am finding it bit confusing working around this problem. I have parent DIV and 3/more Child DIV. Parent DIV is center aligned and child DIV should be floating left but should be aligned center. CSS contains, ``` .center { float:left; height:250px; width:15%; margin: 0 auto; border: 1px solid black; } ``` I have a sample of the code link here...

Original source