垂直對齊中間與Bootstrap響應網格

我有一個非常簡單的問題垂直中間一個span使用引導2.3.2。垂直對齊中間與Bootstrap響應網格

要求：

有兩列，左邊的列具有固定的高度300像素，因爲有300×300圖像內。
右欄有文字，必須以左欄爲中心。
整件事情必須有迴應。這就是爲什麼我使用響應式圖像。
如果第二列落到底部，它的高度必須適合文本的大小。這意味着我無法在第二列上設置固定高度。
不得用JS來解決這個問題。

HTML：

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span6"> 
     <img class="img-responsive" src="http://placehold.it/300x300"/> 
    </div> 
    <div class="span6 v-center"> 
     <div class="content"> 
      <h1>Title</h1> 
      <p>Paragraph</p> 
     </div> 
    </div> 
    </div> 
</div>

CSS：

.v-center { 
    display:table; 
    border:2px solid gray; 
    height:300px; 
} 

.content { 
    display:table-cell; 
    vertical-align:middle; 
    text-align:center; 
}

我的代碼：http://jsfiddle.net/qhoc/F9ewn/1/

你可以看到我在上面做了什麼：我基本上將第二列span設置爲表格，middle將.content設置爲表格單元格。我在這裏複製了這種方法How to use vertical align in bootstrap（這裏的工作示例爲http://jsfiddle.net/lharby/AJAhR/）

由於上述要求，我的挑戰有點不同。任何想法如何使其工作？謝謝。

來源

2013-12-09 HP.

'display：table-cell';導致這種錯誤的行爲，請嘗試使用'display：block' – MarmiK

將!important規則添加到.v-center類的display: table。

.v-center { 
    display:table !important; 
    border:2px solid gray; 
    height:300px; 
}

您的顯示器屬性正被引導程序覆蓋到display: block。

Example

來源

2013-12-09 10:13:43 Morpheus

第二列的固定高度不符合上述＃4，因爲它的高度應該縮小以適合文本大小的高度 –

沒關係我想通了。只需在移動媒體查詢中設置高度：自動 –

.row { 
    letter-spacing: -.31em; 
    word-spacing: -.43em; 
} 
.col-md-4 { 
    float: none; 
    display: inline-block; 
    vertical-align: middle; 
}

注：.COL-MD-4可以是任何網格列，它只是一個在這裏的例子。

來源

2014-03-18 11:36:33 arithran

垂直對齊中間與Bootstrap響應網格

回答

相關問題