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 ＆amp; vertical-align:middle 到 .caption div

以下是演示 http://jsfiddle.net/nvishnu/v5rcy0f5/6/

Answer 2

这会得到您正在寻找的结果：

<!-- language: lang-html -->
<div class="captionDiv">
    <img class="leftImage" src="http://lorempixel.com/300/200" title="Template Secondary     
    Image">
    <span class="caption">Lorem ipsum dolor sit more amet. Sed ut.</span>
</div>


.captionDiv {
    margin-bottom: 10px;
}
.leftImage {
    float: left;
    // display: inline;
    margin-right: 10px;
}
.caption {
    float: left;
    font-style: italic;
    padding-top: 100px;
}

工作小提琴

see this fiddle

Answer 3

也许这可能是一种可能性：

<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>

.captionDiv {
    position:relative;
    margin-bottom: 10px;
}
.leftImage {
    float:left;
}
.caption {
    display:block;
    padding-top:75px;
    font-style: italic;
}

Fiddle

垂直对齐标题与图像

3 个答案:

工作小提琴