CSS / HTML alignment of several side-by-side divs

Question

I am creating a web site that needs a few blocks of text and images, located next to each other. But I also want them to be focused. I use the set size for each of these elements, so if someone changes the screen size, I want my page continues to change the number of shared next to each other. I used to use float: left; for this, but it will not work, because I want my page has centered to the middle.

so that it looks like this:

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

but it will look like when you change the screen size:

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

and if the size would be:

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

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

Does anyone have any tips?

Answer 1

Make all the display:inline-block and set the parent of the text-align:center .

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

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

Note: if you want your images within each element are centered, you can:

• Leave images as display:inline (default) and let the text-align:center flows from the parent element, and uses explicit <br> to force the package after them or
• you can install the image on the display:block (as I did in the second demo above), and then use margin:0 auto , to get them horizontally within its parent container.

Answer 2

You can do this by creating a container with a min-width and max-width and text-align:center .

Answer 3

Displaying individual elements: integrated and container element centered text alignment ... example here http://psarink.org/gallery.php