在图像旁边垂直对齐文本

Fightstarr20

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

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

实现此目标的最佳方法是什么？有人看到我的例子吗？

泰塔·科拉奇（Teuta Koraqi）

您可以选择使用此选项，但其中之一是使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。