How to center multiple divs in another div?

Question

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

I have used float: left on the four divs so that they are horizontally next to each other.

CSS:

<style>
    .square
    {
     float: left;
     margin:1pt;
     width:72pt;
     height:72pt;
    }
    .container
    {
     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 four divs inside the container?

EDIT: The number of div inside the container may not always be 4, it could be 3 or 2 (There is actually some php around that code...).

Answer 1

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.

Answer 2

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.

Answer 3

[Ask SM: CSS] Equal Spacing, CSS Font Replacement

This Link should be helpful.