Centering a variable number of divs in a div container

Question

I really need help as it drives me crazy!

I need to specify x the number of child divs (or spans, if that helps) inside the parent div. Child divs should be centered.

I know the width of the child divs, say 100px. The width of the parent div is 700px.

Again, the number of child divs can vary from 1 to 7.

The child divs contain an image and short text.

I tried to illustrate my desired result with my mental abilities for Photoshop, but as a new user, I am not allowed to upload an image.

Please see my illustration here: http://whiteboxstudio.dk/div%20positioning.jpg

I hope this will be enough information for you, as for you, hackers who can help me.

Thanks!

Answer 1

HTML

<div class="parent-div"> <div></div> <div></div> <div></div> </div> 

this css should work:

 .parent-div { text-align: center; } .parent-div div { border: green 1px solid; display: inline-block; } .parent-div div:first-of-type { border-color: blue; } .parent-div div:last-of-type { border-color: red; } 

to fix the inline block in IE 6/7 for your particular stylesheet

 .parent-div div { zoom:1; /* gives layout */ *display: inline; /* ie6/7 inline */ _height: 30px; /* ie6 height - height of children */ } 

Answer 2

Something like that? HTML:

 <div id="container"> <div id="padder"> <span class="blue"> Blue </span> <span class="green"> Green </span> <span class="red"> Red </span> </div> </div> 

CSS

 #container{ width: 500px; border: 1px solid #000000; text-align: center; } #padder{ margin: 0 auto; } .blue{border: 1px solid #0000ff; } .green{border: 1px solid #00ff00;} .red{border: 1px solid #ff0000; } 

Violin: http://jsfiddle.net/LU7Vp/

Answer 3

one way: (but uses the built-in block) http://jsfiddle.net/2uKWC/

 <div id="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> #parent{ height:100px; border:thin solid yellow; text-align:center; } .child{ display:inline-block; border:thin solid blue; width:100px; height:100px; }