Centering variable number of divs inside a div container

Question

I really need some help as this is driving me nuts!

I need to position x number of child divs (or spans if that helps) inside a parent div. The child divs needs to be centered.

I know the width of the child divs, lets say it's 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 a short text.

I've tried to illustrate my desired result in with my insane photoshop skills but being a new user I'm not allowed to upload an image.

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

I hope this is sufficient information for you awesome css hackers to 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 inline-block in IE 6/7 for your ie specific stylesheet

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