在Twitter中垂直居中內容Bootstrap網格系統

我沒有找到在Twitter Bootstrap Grid系統中垂直居中內容的方法。 http://twitter.github.com/bootstrap/scaffolding.html#gridSystem 在Twitter中垂直居中內容Bootstrap網格系統

例如

<div class="row"> 
    <div class="span4" style="height:50px;min-height: 50px;">My centered object vertically</div> 
</div>

在span4 DIV對象將總是在div的頂部。我試圖把vertical-align: middle;放在父母和孩子的Div's上，但是這並沒有幫助。

來源

2013-03-22 Tomas

垂直對齊不被自舉處理，因此它只是一個CSS米東北黑鈣土。您可能會在[此問題]中找到一些信息（http://stackoverflow.com/q/11303461/1478467）或[this one]（http://stackoverflow.com/q/12882601/1478467） – Sherbrow 2013-03-22 08:47:13

使用的line-height或填充它...

像這樣的line-height，

.line-height { line-height:30px; } 

<div class="row"> 
    <div class="span4 line-height">My centered object vertically</div> 
</div>

喜歡本作填充，50像素高度減去它與填補裝置paddingtop +高度+ paddingBottom來= 50像素，

.padding { height:30px; padding:10px 0; } 

<div class="row"> 
    <div class="span4 padding">My centered object vertically</div> 
</div>

來源

2013-03-22 08:12:27 SaurabhLP

在Twitter中垂直居中內容Bootstrap網格系統

回答

相關問題