html - 使用 Bootstrap 基于图像垂直对齐文本

Question

我有一个图像，并希望它旁边的文本垂直居中。如果水平对齐，我可以使用文本中心，但我需要垂直对齐。我怎样才能做到这一点？ Bootstrap 中有什么方法可以做到这一点吗？

  <div class="col-md-12 well">
      <div class="col-md-3">
        <img src="http://placehold.it/100x100"></img>

      </div>
      <div class="col-md-3">
        <div>
        This text should be centered vertically
        </div>
      </div>
    </div>

这里是 codepen

Answer 1

如何使用 flexbox :

.well {
  display: flex;
  align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12 well">
  <div class="col-md-3">
    <img src="http://placehold.it/100x100"></img>
  </div>
  <div class="col-md-3">
    <div>
      This text should be centered vertically
    </div>
  </div>
</div>