html - 如何在 Bootstrap 行中垂直居中文本

Question

所需的显示是让左列中的文本垂直居中(中间)。我没能做到这一点。这是因为右栏中的图片比 2 段文字高。有趣的是，橙色的 div 仅与段落一样高。

内联样式仅用于调试。所使用的设计是响应式的，所以我假设设置一个以 px 为单位的高度将使其无响应。

编辑:内联调试样式具有误导性，因此已被删除

<div class="row">
  <div class="col-md-8">
    <div class="vertical-align-center">
      <p>First small paragraph with other elements in it</p>
      <p>Second small paragraph with other elements in it</p>
    </div>
  </div>

  <div class="col-md-4">
    <img class="img-responsive img-md-size" src="blog.localhost/klequis/wp-content/uploads/2016/0521/DevBoxRunning.png">
  </div>
</div>

Answer 1

在 Bootstrap 4 及更高版本中，您可以将 align-self-center 类添加到列 div 以使其垂直居中。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-8 align-self-center">
    <p>First small paragraph with other elements in it</p>
    <p>Second small paragraph with other elements in it</p>
  </div>

  <div class="col-4">
    <img src="//lorempixel.com/150/300/" class="img-responsive" />
  </div>
</div>