css - 有选择地将垂直对齐应用于各个 Bootstrap 列

Question

我想在使用 bootstrap 的页面上将图像垂直居中。我能够使用此 answer 将垂直对齐应用于整个 Bootstrap 行，但这会影响 Bootstrap 行中的所有列，而不是我想要的，这只是其中一列受到影响。

如何有选择地应用此样式？

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