引導：如何垂直內柱

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

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

<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）。

你的幫助是極大的讚賞！

來源

2017-06-23 Adrian

您從不在列中使用容器，因此您知道 –

[vertical-align with Bootstrap 3]的可能重複（https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3） –

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

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

來源

2017-06-23 09:39:57 soheil

謝謝，與@TheLiquidCharcoal的回答一樣，請參閱我上面的評論。 :-) – Adrian

@Adrian我的榮幸，我更新了我的答案，你應該加上'flex-wrap：wrap;'。如果有幫助，請檢查我的答案是否正確。 – soheil

哇，這個工作！我無法相信這不在其他任何問題中。 :-D謝謝！也許，對於未來的讀者，您可以在您的原始答覆中添加css屬性應用於.row div。 – Adrian

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

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

來源

2017-06-23 09:53:57 EmmaJ

謝謝你的回覆。不幸的是，這並沒有產生所需的垂直居中（我嘗試將它應用於所有div級別，而且沒有任何效果）。 – Adrian

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

就這樣。

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

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

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

來源

2017-06-23 10:22:17 TheLiquidCharcoal

耶，這工作在LG！但是，當將屏幕大小更改爲md或sm時，它將防止發生換行而造成佈局混亂。有沒有辦法解決這個問題？我也嘗試將CSS應用於其他div，但只有與.row一起使用才能達到預期的效果（以lg爲單位）。謝謝！ – Adrian

這裏是jQuery代碼。

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

我認爲這會爲你工作。

來源

2017-06-23 12:54:15 TheLiquidCharcoal

引導：如何垂直內柱

回答

相關問題