html - 垂直对齐图像旁边的文本

Question

我正在尝试使用 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>

https://jsfiddle.net/DTcHh/23814/

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

实现此目标的最佳方法是什么？有人可以举个例子吗？

Answer 1

您有多种选择，但其中之一是使用 flex:

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body{margin: 10px;}

img{float:left;margin-right:20px}
.col-sm-4 > div {
  display: flex;
  align-items: center;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4">
<div>
    <img class="img-circle" src="http://dummyimage.com/100x100/000/fff">
    <h2>
        Short title
    </h2>
    </div>
</div>

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