Div水平對齊以堆疊為中心

Question

我正在使用bootstrap3，我想要實現的目標如下：

我有一個寬大的div 100％

.bigdiv { width: 100% }

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

我希望那些4個div必須在.bigdiv div中居中對齊（水平）。 但是，如果我調整窗口大小，那么它們應該向下流動並相互堆疊，但仍然在中心對齊。 為了在窗口調整大小上流暢地堆疊，我嘗試了float:left但是它確實沒有給出所需的視圖。

在調整大小之前和之后，我很難將這些小div保持在中心位置。 請參閱附圖，說明可能的情況 任何幫助，將不勝感激。

Answer 1

檢查有關網格的bootstrap文檔...將div放在你的bigdiv中心，你必須添加一個帶有類的div：.container，在這里，一個帶有類行的div，然后是你的cols ......像這樣：

<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可以很容易地實現這一點display: inline-block子節點中的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;
}

演示小提琴