Q:

Center multiple divs in another div?

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.

A:

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;
}

A:

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.

A:

Instead of floating the .square divs, give them display: inline-block. This might be dodgy in Firefox 3.0.x but I believe inline-block is fully supported in 3.5.x.

