Center floated child DIVs in a parent DIV that has fluid width

Question

I have the following HTML:

     
Box1
     
Box2
     

        
      

Answer 1

text-align works on inline elements. If I understand your problem, you should remove the float and put the boxes in display:inline-block.

Something like this : http://jsfiddle.net/6a2eqpmu/7/

#parent {
   max-width: 1500px;
   height: 500px;
   border: 1px solid #000000;
   text-align: center;
}
.child {
    width: 100px;
    height: 100px;
    border: 1px solid #000000;
    margin: 10px;
    display:inline-block; 
}

I added html comments to avoid the white-space problem, and put a max-width of 1500px in order to see the boxes centered.