bootstrap 3.3.7垂直对齐中心图像列

Question

我有一些基本的标记，如下所示：

<div class="list-content sales">    
    <div class="row row-eq-height"> 
        <div class="col-sm-2 col-xs-12" style="border: 1px solid black;">
            <img src="https://picsum.photos/223/176" class="img-responsive img-rounded">
        </div>
        <div class="col-sm-10 col-xs-12" style="border: 1px solid black;">
            <div class="sale-details">
                <h2>Sale Test</h2><i class="fa fa-heart-o" aria-hidden="true"></i>
                <p>Sale buyer</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            </div>
        </div>
    </div>
</div>

我的问题是img所在的第一个col，我无法进行任何类型的垂直对齐。我尝试过使用center-block bootstrap类。我可以让它移动的唯一方法是使用margin-top标记，但我希望垂直对齐此列图像的正确方法。这是最终看起来像。您可以看到它在列顶部齐平，这不是我正在寻找的行为：

我是否可以在Bootstrap 3.3.7中使用内置类来垂直对齐我的图像？

Answer 1

这很容易做到。 :)只需将此inline-CSS添加到img父div：

display: flex;
align-items: center;

<div class="col-sm-2 col-xs-12" style="border: 1px solid black; display: flex; align-items: center;">