html - 在单个 bootstrap 行中使用两列，如何将文本垂直居中？

Question

我正在使用 Bootstrap 3。

我有一系列包含两列的行。第一列显示文本，第二列显示图像。我想将第一列中的文本相对于它所在的行垂直居中，以便它与相邻的图像很好地对齐。

示例 HTML:

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <h2>Some heading</h2>
            <p>I want all this text centred relative to the image next door</p>            
         </div>
         <div class="col-sm-6 image">
             <img class="img-responsive" src="http://i.imgur.com/cztLHHo.png"/>
        </div>
    </div>
</div>

请注意，我正在使用 Bootstrap img-responsive 类来为移动设备正确调整图像大小。

JSFiddle

我看到的是:

我想实现的是:

我确定这是 CSS 忍者 Action 的一个常见执行位，但我找不到一个很好的例子。有人可以帮忙吗？我更喜欢 CSS 解决方案。

Answer 1

看看这个fiddle link

我在 css 中使用了以下属性

.row
{
display: flex;
align-items: center; 
}