Center align multiple child DIV

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.

Answer 2

#parent{
    display: flex;
    justify-content:center;
    flex-direction:row; /*default value is row*/
    height:350px;
    width:75%;
    border:1px solid blue;
    padding: 10px 0;/* not mandatory */
}
.center {
    height:250px;
    width:15%;
    margin:5px;
    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>

Flex helps us achieve certain things with ease.