Center a div group in a div

Question

Is it possible to center a group of divs in one div so that it looks like this?

http://oi49.tinypic.com/1yo2dh.jpg

I wonder if you can do this without using a table.

Now I got this HTML:

<nav class="imagemenu"> <div id="categories"> <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div> <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div> <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div> <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div> <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div> <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div> <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div> <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div> <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div> <div class="cata" onClick="#" style="cursor:pointer;"> <img src="image/placeholder.jpg" /> </div> </div> </nav> 

And this CSS:

 .home-menu { width:780px; height: 340px; margin-top:10px; padding: 20px; background-color:#CCC; } #categories { width:740px; height:340px; margin:0 auto; background-color:#333; } .cata { width:150px; height:100px; margin-bottom: 20px; float:left; background-color:#FFF; opacity:0.5; } .cata { opacity:1.0; } 

The sizes are still dependent, but is it possible to easily center all the kata in div categories?

I tried some parameters, such as overflow and text-align:center , from other related questions, and maybe I used them incorrectly, but they do not work.

Answer 1

You can add text-align :

 #categories { […] text-align:center; } 

and display: inline-block , and you should remove the float from this CSS rule:

 .cata{ […] display:inline-block; } 

Demo

http://jsfiddle.net/EdHS9/

Answer 2

Yes it is possible.

All you have to do is make the inline-block div elements so that they respond to text-align:center as inline elements.

Here is a fiddle to demonstrate.

http://jsfiddle.net/