ディスプレイの垂直方向のセンタリングコンテンツ：flex;カラム

Question

Flexboxを使用して、隣接する2つのカラムの高さを揃えます。これは機能します。私は今、固定された高さを使用せずにフレックスボックスの列内の内側のコンテンツを垂直に中心にする必要があります。さらに、これは、すべてのブートストラップ3内で作業する必要があります以下のコードを参照してください。

.row-flex, 
 
.row-flex > div[class*='col-'] { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex: 1 1 auto; 
 
} 
 
.row-flex-wrap { 
 
    -webkit-flex-flow: row wrap; 
 
    align-content: flex-start; 
 
    flex: 0; 
 
} 
 
.row-flex > div[class*='col-'], 
 
.container-flex > div[class*='col-'] { 
 
    margin: -.2px; 
 
    /* hack adjust for wrapping */ 
 
} 
 
.container-flex > div[class*='col-'] div, 
 
.row-flex > div[class*='col-'] div { 
 
    width: 100%; 
 
} 
 
.flex-col { 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    flex: 1 100%; 
 
    flex-flow: column nowrap; 
 
} 
 
.flex-grow { 
 
    display: flex; 
 
    -webkit-flex: 2; 
 
    flex: 2; 
 
} 
 
.content { 
 
    border: 1px solid black; 
 
    padding: 20px; 
 
} 
 
.content-inner { 
 
    border: black solid 1px; 
 
    padding: 20px; 
 
} 
 
.img { 
 
    width: 100px; 
 
    height: auto; 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 
figcaption { 
 
    text-align: center; 
 
} 
 
[class*="col-"] { 
 
    padding: 0; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="row row-flex row-flex-wrap"> 
 
    <div class="col-xs-7"> 
 
     <div class="content"> 
 
     <div class="content-inner"> 
 
      <figure> 
 
      <img class="img" src="http://i80.photobucket.com/albums/j182/swiftian/headersnstuff/sidebar_zaius.jpg" alt="Macaque in the trees"> 
 
      <figcaption>Dr. Zaius</figcaption> 
 
      </figure> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-5"> 
 
     <div class="content"> 
 
     <div class="content-inner"> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Lorem ipsum dolor sit amet, 
 
      consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!--/row--> 
 
</div> 
 
<!--/container--> 
 
<hr>

JS FIDDLE https://jsfiddle.net/baydbzbn/1/

を任意の助けに感謝。

Answer 1

は、あなたの.contentクラスのCSSの定義滑らかでシンプルな

display: flex; 
    align-items: center;