個々のブートストラップカラムに垂直アライメントを選択的に適用する

Question

ブートストラップを使用しているページに画像を垂直方向にセンタリングしたいと考えています。このanswerを使用してブートストラップ行全体に垂直方向の配置を適用することはできましたが、それは影響を受ける列の1つだけではなく、ブートストラップ行のすべての列に影響します。

このスタイリングを選択的に適用するにはどうすればよいですか？

<div> 
    <div class="row"> 
     <div class="col-xs-6"> 
     <p> lorem ispum bla bla </p> 
     </div> 
     <div class="col-xs-6"> <!-- column I want vertically aligned --> 
     <img href="#"> 
     </div> 
    </div> 
</div> 

Answer 1

あなたはこのようalign-self: centerを使用してそれを達成することができます

HTML

<div> 
    <div class="row flex"> 
     <div class="col-xs-6"> 
     <p> lorem ispum bla bla </p> 
     </div> 
     <div class="col-xs-6 center-me"> <!-- column I want vertically aligned --> 
     <img href="#"> 
     </div> 
    </div> 
</div> 

CSS

.flex { 
    display: flex 
} 

.center-me { 
    align-self: center 
}