Center multiple divs in another div?

Question

I have four divs contained in another div, and I want the four inner divs to be centered.

I have used float: left on the four divs so that they are horizontally aligned.

CSS:

<style>     .square  //inner divs     {         float: left;         margin:1pt;         width:72pt;         height:72pt;     }     .container //outer divs     {         text-align:center;         width:450pt;         height: 80pt;     } </style> 

and HTML:

<div class = "container">     <div class = "square">...</div>     <div class = "square">...</div>     <div class = "square">...</div>     <div class = "square">...</div> </div> 

How can I center the divs inside the container?

The number of inner divs can be variable.

Answer 1

Because you don't know the number of divs you have, you should use

text-align:center on the outer div

display:inline-block on then inner div

http://jsfiddle.net/edi9999/yv2WY/

HTML

<div class = "container">     <div class = "square">John</div>     <div class = "square">Mary</div>     <div class = "square">Doe</div>     <div class = "square">Jane</div> </div> 

CSS

.square {     margin:1px;     width:20%;     text-align:left;     border: 1px solid gray;     display:inline-block;     } .container {     text-align:center;     width:100%;     height: 80pt;     border: 1px solid black; } 

Answer 2

Here's an alternate method if you can use an extra div:

<div class = "container">   <div class="centerwrapper">     <div class = "square">...</div>     <div class = "square">...</div>     <div class = "square">...</div>     <div class = "square">...</div>   </div> </div>  <style>     .square     {         float: left;         margin:1pt;         width:72pt;         height:72pt;     }     .container     {         text-align:center;         width:450pt;         height: 80pt;     }     .centerwrapper     {        margin: auto;        width: 302pt;     } </style> 

Also, make sure you have a closing quote on your <div class = "container"> there. The code you pasted is missing one.