Bootstrap如何垂直居中

我這裏有一個簡單的HTML，通過使用自舉3：

<div class="container"> 
<div class="row"> 
<div class="col-sm-12 text-center" style="padding:5 20 5 20;"> 
Some text text text text text ..... 
</div> 
</div> 
<div class="row"> 
<div class="col-sm-12"> 
<div class="thumbnail"> 

     <img data-src="holder.js/460x308"> 

    </div> 
</div> 
</div> 
</div>

我想這個中心容器或排......沒關係。

所以，想象一下，我有一個窗口，它是500像素X 500像素

我想pisition它在它的中間，而不是頂部（什麼是現在的情況）或底部，但在中心

PS：http://jsfiddle.net/e89TE/

來源

2014-01-28 Alnedru

可能重複的[如何居中一個div的div - 水平？]（http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally） – Beterraba

試試這個CSS：

.container{ 
    display:table; 
} 

.row{ 
    display: table-cell; 
    vertical-align: middle; 
}

應該工作。 PS。發佈下一次小提琴

來源

2014-01-28 19:44:53

哦，好的，謝謝，我試過垂直對齊，但沒有工作，我想因爲我沒有把顯示器：表格單元 – Alnedru

沒問題，一旦你測試它，它作品請將問題標記爲已回答。 –

是的當然我會，但我測試，它不工作:( – Alnedru

，如果你想在圖像的頂部類型，你需要做的第一件事是使圖像的背景圖像：

<div class="col-sm-12 text-center"> 
    <div class="foo"> 
    Some text text text text text ….. 
    </div> 
</div>

CSS的

.foo { 
background-image:url("holder.js/460x308"); 
}

來源

2014-01-28 20:58:16 moodyjive

Bootstrap如何垂直居中

回答

相關問題