垂直對齊div中包含的div代表一行

Question

我已經嘗試過幾乎每個垂直對齊的div技巧，我可以找到並仍然沒有得到結果。這是建立在響應式框架內部，所以我將它分解爲一些內聯CSS來顯示問題。

<div class="row uniform"> 
 
    <div style="clear:none;width:25%;float:left;background:#CCC;box-sizing:border-box;"> 
 
    box 1<br /> 
 
    line 2 
 
    </div> 
 
    <div style="clear:none;width:25%;float:left;background:#a43c69;color:#FFF;box-sizing:border-box;"> 
 
    box 2 
 
    </div> 
 
    <div style="clear:none;width:25%;float:left;background:#CCC;box-sizing:border-box;"> 
 
    box 3 
 
    </div> 
 
    <div style="clear:none;width:25%;float:left;background:#a43c69;color:#FFF;box-sizing:border-box;"> 
 
    box 4 
 
    </div> 
 
</div>

理想箱2,3和4到同一個高度箱1，和文本中的所有框的中間垂直對齊。

row.uniform設置了一些邊距，填充和基線的默認垂直對齊，但這並不影響任何內容。

Answer 1

請注意，我刪除了所有div上的float: left;。

.row { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.row div { 
 
    display: table-cell; 
 
    float: none; 
 
    vertical-align: top; 
 
}

<div class="row uniform"> 
 
    <div style="clear:none;width:25%;background:#CCC;box-sizing:border-box;"> 
 
    box 1<br /> 
 
    line 2 
 
    </div> 
 
    <div style="clear:none;width:25%;background:#a43c69;color:#FFF;box-sizing:border-box;"> 
 
    box 2 
 
    </div> 
 
    <div style="clear:none;width:25%;background:#CCC;box-sizing:border-box;"> 
 
    box 3 
 
    </div> 
 
    <div style="clear:none;width:25%;background:#a43c69;color:#FFF;box-sizing:border-box;"> 
 
    box 4 
 
    </div> 
 
</div>

對於那些想了解一下瀏覽器的支持，it is supported on all major browsers。

Answer 2

簡單的解決方案和更詳細的信息，請參閱CSS flexbox

如果要居中對齊內容請參閱本demo

.row { 
 
    display: flex; 
 
} 
 
.row div{ 
 
    flex: 1 
 
}

<div class="row"> 
 
    <div style="background:#CCC;"> 
 
    box 1<br /> 
 
    line 2 
 
    </div> 
 
    <div style="background:#a43c69;"> 
 
    box 2 
 
    </div> 
 
    <div style="background:#CCC;"> 
 
    box 3 
 
    </div> 
 
    <div style="background:#a43c69;"> 
 
    box 4 
 
    </div> 
 
</div>