ブートストラップ：列内にコンテンツを垂直方向に中央に揃える方法

Question

私は今この問題に数時間を費やしており、無数の質問を読んできましたが、提供された解決策はどれも役に立たないので、

4列の行を作成したいとします。最初の3つの列には画像があり、4番目の列には、縦に中央に表示するテキストの説明があります（上と下の等しいマージンは明らかに固定されていませんが、画面サイズの変更に反応します）。ここでは、コードです：

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

それはこの作品にCSSベースのソリューションの非は私が見つけることができるブートストラップの特定のクラスで何かを持っている必要があります。この特定の例では、どのように動作させることができますか？可能な場合は構造の残りの部分は（COL-LG-1を含む）変わらないはずですが

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

：この部分に必要な変更を加えること自由に感じなさい。

ご協力いただきありがとうございます。

Answer 1

フレックスボックスを使用できます。あなたの外側を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

私はこれがあなたのために働くだろうと思います。