引導3個div的定位

我有一個佈局，我需要建立爲在圖像中可以看出：引導3個div的定位

Layout overview

灰色代表頭，並沒有問題存在。至於身體，我就如下分成3周的div：

<div class="row"> 
    <div class="col-lg-3"> 
    <p>text positioned right here</p> 
    </div> 
    <div class="col-lg-6"> 
    <a href="#"><img src="path/to/image.jpg"></a> 
    </div> 
    <div class="col-lg-3"> 
    <p>text positioned right here</p> 
    </div> 
</div>

我的問題是，我需要一個文本垂直居中，我不知道怎麼辦。我試過這個解決方案Twitter Bootstrap 3, vertically center content，但它似乎並沒有爲我工作（也許我做錯了什麼）。我試着添加padding-top來修復它，但它弄亂了移動顯示器（如預期的那樣）。

請問誰能幫忙？

謝謝。

來源

2014-06-18 Andrei P

請看看這裏http://stackoverflow.com/questions/10088706/twitter-bootstrap-how-to-center-elements-horizontally-or-vertically。 – Christos

http://stackoverflow.com/questions/10009514/how-to-center-the-contents-of-a-div/10010055#10010055 – ShibinRagh

文本對齊屬性僅用於水平文本對齊，如果要使文本垂直對齊需要使用位置屬性，我們可以使用文本對齊類似的東西。例如：使用屏幕屬性的中心。

position:relative; 
left:50%; top:50%;

還減去容器的邊緣屬性。

來源

2014-06-18 09:52:56 user3722353

垂直居中的最簡單方法是將display:table添加到包含元素，並將display:table-cell添加到要居中的元素。 Bootstrap有一個.text-center類來處理水平居中。

http://www.bootply.com/lTigluKakK

使用您的示例作爲模板：

<div class="col-xs-3 text-center v-align-container"> 
    <p class="v-align-content">text positioned right here</p> 
    </div> 
    <div class="col-xs-6 text-center"> 
    <a href="#"><img src="//placehold.it/400x400"></a> 
    </div> 
    <div class="col-xs-3 text-center v-align-container"> 
    <p class="v-align-content">text positioned right here</p> 
    </div>

CSS：

.v-align-container{display: table;height:400px} /* height set to match img (plus padding if needed) */ 
.v-align-content{display:table-cell;vertical-align:middle}

如果你能夠定義側邊欄的div的高度，這個偉大的工程。但是，如果您需要它們與中心元素的高度動態匹配，則需要更多的引導魔術才能將它們綁定在一起，但這仍然適用於將內容集中在這些邊欄內。

來源

2014-06-18 16:00:32

引導3個div的定位

回答

相關問題