垂直对齐 div 和另一个 div

Question

我需要垂直对齐包含文本的 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

你可以试试table。在一列中是图像，在其他列中是文本

Answer 2

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

Answer 3

使所有块（divs 和 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 4

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

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

这是一个fiddle：http://jsfiddle.net/hmyLz28j/

Answer 5

.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 > 80px 改错了一些 "

垂直对齐 div 和另一个 div

vertical align a div next to another div

html

css

vertical-alignment