在div容器内居中可变数量的div

Question

我真的需要一些帮助,因为这让我疯了!

我需要在父div中定位x个子div(或者如果有帮助的话,可以跨越).儿童div需要居中.

我知道子div的宽度,让我说它是100px.父div的宽度为700px.

同样,子div的数量可以从1到7不等.

子div包含图像和短文本.

我试图用疯狂的Photoshop技能来说明我想要的结果,但作为一个新用户,我不允许上传图像.

请在此处查看我的插图:http://whiteboxstudio.dk/div%20positioning.jpg

我希望这是足够的信息,让你真棒的CSS黑客帮助我.

谢谢!

Answer 1

HTML

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

这css应该工作:

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

在IE 6/7中为您的特定样式表修复内联块

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