Question

我正在尝试垂直对齐块内的内容 - 内容是左边的图像（下面没有文本）和一段文本。当文本在大屏幕上时，段落的高度小于图像的高度，因此段落应垂直对齐到中间。另一方面，当内容显示在较小的屏幕上时，段落的高度大于图像，图像应垂直对齐。中心图像很容易，因为我知道高度，但如何处理响应段落？我尝试过的所有内容都会导致一些奇怪的行为 - 例如，在小屏幕上时，块会相互重叠。所以我开始认为它不可能通过CSS而且我需要一些Javascript。

HTML：

<div class="entry">
<img src="http://placehold.it/100x100" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu rhoncus eros. Nunc ac mollis velit. Cras vitae odio fringilla, consectetur felis id, maximus quam. Nulla placerat felis nec malesuada mattis. </p>
</div>
<div class="entry">
<img src="http://placehold.it/100x100" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu rhoncus eros. Nunc ac mollis velit. Cras vitae odio fringilla, consectetur felis id, maximus quam. Nulla placerat felis nec malesuada mattis.</p>
</div>

CSS：

div.entry {
    margin-bottom: 10px;
    min-height: 100px;
    padding: 0 10px 0 120px;
    position: relative;
}

div.entry img {
    bottom: 0;
    left: 0;
    margin: auto 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}

可以在此处找到示例：http://jsfiddle.net/46psK/2583/

Answer 1

使用Flexible box方法解决。将父容器设置为flex，并将内部对齐的项目放在cross-axis

的中心位置

div.entry {
  margin-bottom: 10px;
  min-height: 100px;
  padding: 0 10px 0 120px;
  position: relative;
  display: flex;
  align-items: center;
}
div.entry img {
  bottom: 0;
  left: 0;
  margin: auto 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
}

<div class="entry">
  <img src="http://placehold.it/100x100" alt="" />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu rhoncus eros. Nunc ac mollis velit. Cras vitae odio fringilla, consectetur felis id, maximus quam. Nulla placerat felis nec malesuada mattis.</p>
</div>
<div class="entry">
  <img src="http://placehold.it/100x100" alt="" />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu rhoncus eros. Nunc ac mollis velit. Cras vitae odio fringilla, consectetur felis id, maximus quam. Nulla placerat felis nec malesuada mattis.</p>
</div>

Answer 2

尝试使用display：table-cell。修改后的CSS如下所示。

    div.entry {
     margin-bottom: 10px;
     min-height: 100px;
     padding: 0 10px;
     display: table;
    }
    div.entry img, div.entry p {
      display: table-cell;
      vertical-align: middle;
    }
    div.entry img {
     margin:0 10px 0 0;
     width: 100px;
    }

HTML - 垂直对齐响应内容

2 个答案: