html - 将标题与图像垂直对齐

Question

我正在尝试在图像右侧绘制标题。

这是一个jsfiddle以下:

.captionDiv {
  margin-bottom: 10px;
}
.leftImage {
  display: inline;
  margin-right: 10px;
}
.caption {
  font-style: italic;
}

<div class="captionDiv">
  <img class="leftImage" src="http://lorempixel.com/300/200" title="Template Secondary Image">
  <span class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut.</span>
</div>

我正在尝试让标题文本在图像右侧换行并垂直居中。

我尝试使用 vertical-align: middle; 但这不会影响文本。

我哪里错了？

Answer 1

将 display:table 属性添加到 .captionDiv 并
添加 display:table-cell & vertical-align:middle 到 .caption 格

这是工作演示 http://jsfiddle.net/nvishnu/v5rcy0f5/6/