Selectively Apply Vertical Align to Individual Bootstrap Columns

Question

I would like to vertically center an image on a page which is using bootstrap. I was able to apply vertical alignment to the entire bootstrap row using this answer, but that affects all columns within the bootstrap row, rather than what I want, which is for just one of the columns to be affected.

How can I selectively apply this styling?

<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

You can achieve that by using align-self: center like this:

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
}