Question

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…

Answer 1

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.