在单个引导行中使用两列，如何将文本垂直居中于一个？

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 ninja行动中常见的一点，但我无法找到一个很好的例子。有人可以帮忙吗？我更喜欢CSS解决方案。

Answer 1

看看这个fiddle link

我在css中使用了以下属性

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