引導：如何垂直內柱

Question

我已經在這個問題上花了幾個小時，現在並通過無數問題都讀，但沒有提供解決方案，爲我工作中心的內容，所以我現在真想把我的後具體的問題：

我想建立一排四列。前三列有圖片，第四列有我想要垂直居中顯示的文字說明（意思是在上下邊緣有相同的邊距，顯然不是固定的，但是對變化的屏幕尺寸有反應）。這裏的代碼：

<section> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-lg-4 col-sm-6"> 
       <img ...> 
      </div> 
      <div class="col-lg-4 col-sm-6"> 
       <img ...> 
      </div> 
      <div class="col-lg-3 col-sm-6"> 
       <img ...> 
      </div> 
      <div class="col-lg-1 col-sm-6"> 
       <div class="container-fluid"> 
        <p>Some text that is supposed to be vertically centered within the column</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

它必須做一些Bootstrap特定類，非基於CSS的解決方案，我可以找到這個工程。我怎樣才能使它在這個特定的例子中工作？隨意讓你想在這個部分的任何變化：

<div class="container-fluid"> 
    <p>Some text that is supposed to be vertically centered within the column</p> 
</div> 

然而，結構的其餘部分應保持不變（如果可能包括COL-LG-1）。

你的幫助是極大的讚賞！

Answer 1

您可以使用Flexbox的。讓你的外div，display: flex和使用該財產align-items使它的內容垂直居中。下面是代碼：

#outerDiv{ 
    display: flex; 
    align-items: center; 
    flex-wrap: wrap; 
} 

Answer 2

下面的代碼將完全內一個div中心項目：

display: -webkit-flex; /* Safari */ 
-webkit-justify-content: space-around; /* Safari 6.1+ */ 
display: flex; 
justify-content: space-around; 
justify-content: center; 

Answer 3

所有你需要做的是添加以下代碼片段到你的CSS。

就這樣。

.row{ display: flex; align-items: center;} 

我試了相同的代碼，也得到了輸出。如果你想看，請下載並運行它。

https://www.dropbox.com/s/0x7iqi6alayd8xg/VerticallyCentered.html?dl=0

Answer 4

這裏是jQuery代碼。

https://www.dropbox.com/s/nj38bcnadguaraf/VerticallyCentered_V2.html?dl=0

我認爲這會爲你工作。