How to Center Floated Divs in a Container

Question

Hi!

Is it possible to center floated divs in a container and if so how?

For example I have a page with a container div containing lots of variable sized (dynamically generated) floated (left) divs. The divs overflow onto the next line reguarly but they are never centered in the container div, instead alined with the left. It looks like this:

----------------------------
-                          -
- +++  +++++  ++++  ++     -
- +++  +++++  ++++  ++     -
-                          -
- ++   ++++++  +++  +      -
- ++   ++++++  +++  +      -
-                          -
----------------------------

Whereas I would like the floated divs centered in the container like this:

----------------------------
-                          -
-   +++  +++++  ++++  ++   -
-   +++  +++++  ++++  ++   -
-                          -
-   ++   ++++++  +++  +    -
-   ++   ++++++  +++  +    -
-                          -
----------------------------

Thanks,

DLiKS

Answer 1

Yes:

http://www.pmob.co.uk/pob/centred-float.htm

Or

http://css-discuss.incutio.com/wiki/Centering_Block_Element

Answer 2

A nice trick to center "div" element is to set "margin: auto", it will center them.

Answer 3

<div id='contain'><center><div id='content'>qwerty</div></center></div>

OR

<div id='contain'><div id='content'>qwerty</div></div>

<style type='text/css'>

#content   {

  width:200px;

  height:200px;

  margin:auto;//margin:auto; requires width and i think height to be defined in nearly all browsers

  }</style>