所需的显示是使左栏中的文本垂直居中(中间)。我还无法实现这一目标。这是因为右列中的图片比文本的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>

最佳答案

在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>

关于html - 如何在引导行中垂直居中放置文本,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37380135/

10-12 12:35
查看更多