html - 将一个 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>

我想将“small-right”垂直对齐到图像，以便它基于其中的文本居中。出于某种原因，我尝试的一切都不起作用。

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>

给你:现在好多了:)

我做了什么:我把

, change 80 > 80px 改了一些错误 "