html - 无法垂直居中 Bootstrap 3 媒体

Question

我正在尝试将 Bootstrap 3 图像媒体对象居中放置在一行的左侧。因此，我使用 pull-left 使 CSS 将图像向左浮动，但尽管尝试了所有推荐的在线策略，我仍无法将此图像置于行本身的中心。

这是我正在谈论的代码片段:

https://jsfiddle.net/afoxprogramming/aq9Laaew/242135/

是否可以将这些占位符图像在其行中垂直居中，以便图像上方和下方的空间高度与各自行中的文本不同？下面是一些 html:

<div class="row">
  <div class="col-xs-12">
    <div class="media">
      <img class="pull-left img-responsive index-page-list-image" src="https://via.placeholder.com/157x20"style="max-width: 33.33%">
      <div class="media-body">
      <p class=""><strong>Volunteering</strong></p>
      <p>Test text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text.</p>
      </div>
    </div>
  </div>
  <div class="col-xs-12">
    <div class="media">
      <img class="pull-left img-responsive index-page-list-image" src="https://via.placeholder.com/300x100" style="max-width: 33.33%">
      <div class="media-body">
        <p class=""><strong>Volunteering</strong></p>
        <p>Test text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text. est text. Test text. Test text. Test text. Test text. Test text.</p>
      </div>
    </div>
  </div>
</div>

和相关的 CSS:

.index-page-list-image {
  width: 100%;
}

Answer 1

只需删除 align-items: flex-start;并添加以下内容，您就完成了...

.media {
    align-items: center;
}