HTML

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

使用灵活框方法解决。将父容器设置为 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

尝试使用显示：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 - 垂直对齐响应式内容

HTML - Vertically align responsive content

css

vertical-alignment