Div水平对齐以堆叠为中心

Question

我正在使用bootstrap3，我想要实现的目标如下：

我有一个宽100％的大div

.bigdiv { width: 100% }

在那个bigdiv中，我想要放4个小div。宽度相同，但其中一个高度不同。

我希望这4个div必须在.bigdiv div中居中对齐（水平）。但是，如果我调整窗口大小，那么它们应该向下流动并相互堆叠，但仍然在中心对齐。为了在窗口大小调整上流畅地堆叠，我尝试了float:left，但是它没有提供所需的视图。

在调整大小之前和之后，我很难将这些小div保持在中心位置。请参阅附图，说明可能的情况 任何帮助将不胜感激。

Answer 1

检查有关网格的bootstrap文档...将div放在bigdiv中心，你必须添加一个带有类的div：.container，在这里，一个带有类行的div，然后是你的cols ......就像这样： / p>

<div class="bigdiv">
    <div class="container">
        <div class="row">
            <div class="col-md-3">Col 1</div>
            <div class="col-md-3">Col 2</div>
            <div class="col-md-3">Col 3</div>
            <div class="col-md-3">Col 4</div>
        </div>
    </div>
</div>

请记住，bootstrap使用12列网格，因此请根据需要替换col-lg-3中的数字。

演示：http://jsfiddle.net/gaSJR/

Answer 2

可以使用子级中的display: inline-block和父级中的text-align:center轻松实现此目的：

<强> HTML

<div class="bigdiv">
    <div class="smalldiv"></div>
    <div class="smalldiv"></div>
    <div class="smalldiv"></div>
    <div class="smalldiv"></div>
</div>

<强> CSS

.bigdiv {
    text-align:center;
}

.smalldiv{
    width: 100px;
    height: 100px;
    background: red;
    display: inline-block;
}

.smalldiv:nth-child(3){
    height: 200px;
}

<强> Demo fiddle