Html 垂直对齐图像旁边的文本

我正在尝试使用Twitter Bootstrap 3垂直对齐图像旁边的一些文本

<div class="col-sm-4">
    <img class="img-circle" src="http://dummyimage.com/100x100/000/fff">
    <h2>
        Short title
    </h2>
</div>

<div class="col-sm-4">
    <img class="img-circle" src="http://dummyimage.com/100x100/000/fff">
    <h2>
        A longer title
    </h2>
</div>

简称
长标题

有时我的头衔在一行，有时在两行。这意味着我无法设置静态边距以使文本垂直居中

---

实现这一点的最佳方法是什么？有人有我能看到的例子吗？

您可以选择，但其中之一是使用flex：

/*作为外部资源包含最新编译和缩小的CSS*/
/*可选主题*/
@导入url（'//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap theme.min.css'）；
正文{页边距：10px；}
img{float:left；margin right:20px}
.col-sm-4>分区{
显示器：flex；
对齐项目：居中；
}

简称
长标题

您只需使用flexbox布局即可：

/*布局*/
.柔性容器{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：行；
-ms柔性方向：行；
弯曲方向：行；
-webkit柔性包装：包装；
-ms-flex-wrap:wrap；
柔性包装：包装；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；
填充：0；
保证金：0；
}
.柔性柱{
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
-webkit-flex-grow:0；
flex-grow:0；
-webkit flex收缩：0；
弹性收缩：0；
-网络工具包盒方向：垂直；
-莫兹盒方向：垂直；
-webkit-box-flex:0；
-moz-box-flex:0；
}
.柔性柱自动{
-webkit-flex-grow:1；
柔性生长：1；
-webkit弹性基础：0；
-ms flex首选尺寸：0；
弹性基准：0；
宽度：自动；
最大宽度：100%；
}
/*风格*/
.形象{
边界半径：50px；
}
.标题{
填充：20px；
}

简称
长标题
超长标题

我做了一把小提琴：重复问题