垂直对齐另一个div旁边的div

Question

我需要垂直对齐一个div，该div的文本位于包含图像的div旁边。

内容在标题中可以有多行（如果你看到图像）。

目前html是如何：

<div class="small-view">
    <div class="small-left">
       <img src="image.png" width="80">
    </div>
    <div class="small-right">
       <p class="post-title">This is a post</p>
       <span class="post-info>January 5, 2015</span>
    </div>
</div>

我想垂直对齐＆＃34;小右边＆＃34;到图像，使其基于其中的文本居中。出于某种原因，我尝试的一切都不起作用。

Answer 1

.small-view div {
  display: inline-block;
  vertical-align: middle;
  border: 1px pink solid;
}
.small-right {
  width: 250px;
}

<div class="small-view">
  <div class="small-left">
    <img src="image.png" style=" width: 80px;" />
  </div>
  <div class="small-right">
    <p class="post-title">This is a post <span class="post-info">January 5, 2015</span>
    </p>

  </div>
</div>

你走了：现在更好了：）

我做了什么：我把它放在

中，改变80＆gt; 80px更改了一些错误“

Answer 2

你可以尝试用桌子。在一列中的图像和其他col文本

Answer 3

<div>是一个块级项目，这意味着默认情况下它会在关闭</div>后开始一个新行。这可以通过样式<div style='display:inline'>覆盖，更好的是使用<span>这是一个内联项

Answer 4

将所有块（div s＆amp; p）显示为内嵌，并将垂直对齐应用于图像：

<div class="small-view">
    <div class="small-left" style="display:inline;">
       <img src="image.png" width="80" style="vertical-align:middle">
    </div>
    <div class="small-right" style="display:inline;">
       <p class="post-title" style="display:inline;">This is a post</p>
       <span class="post-info>January 5, 2015</span>
    </div>
</div>

Corresponding codepen

您也可以使用单个div：

<div class="small-view">
    <div class="small-left-and-right">
       <p class="post-title">
          <img src="image.png" width="80" style="vertical-align:middle">
          This is a post
       </p>
       <span class="post-info>January 5, 2015</span>
    </div>
</div>

Corresponding codepen

Answer 5

将此CSS float:left;添加到.small-right

像这样：.small-left {float:left;}

这是一个小提琴：http://jsfiddle.net/hmyLz28j/