CSS/HTML centering of several side by side divs

Question

I'm creating a website which needs several blocks of texts and picture placed next to eachother. But I also want them to be centered. I'm using a set size for each of these elements so if someone resizes their screen I want my page to keep changing the number of divs placed next to each other. Normally I would use float:left; for this but that's not going to work as I want my page to be centered to the middle.

so it would look a bit like this:

________
|1 2 3 4| 
|  5 6  |
|_______|

but when I resize the screen it would look like this:

______
|1 2 3|
|4 5 6|
|_____| 

and if I size up it would look like this:

___________
|1 2 3 4 5 |
|    6     |
|__________|

currently the css looks like this:

 div.child{
width:23%;
float:left;
height:600px;
padding:0px;
min-width:200px;
max-width:230px;
overflow:hidden;
text-align:center;
border-style:solid;
border-width:5px;
overflow:visible;
display:inline-block;
}

and

div.parrent{
padding:0px;
border-style:solid;
border-top-style:solid;
border-width:5px;
overflow:hidden;
text-align:center;
}

Anyone got any tips?

Answer 1

Make them all display:inline-block and set the parent to have text-align:center.

Demo 1: http://jsfiddle.net/xdEmz/1/

Demo 2: http://jsfiddle.net/E5sHa/2/

Note that if you want the pictures inside each item to be centered you can either:

• leave the images as display:inline (the default) and let text-align:center flow through from the parent, and use an explicit <br> to force wrapping after them, or
• you can set the pictures to display:block (as I have done in the second demo above) and then use margin:0 auto to get them horizontally centered within their parent container.

Answer 2

Make the individual elements display:inline and container element with text-align center...example here http://psarink.org/gallery.php