所需的显示是让左列中的文本垂直居中(中间)。我没能做到这一点。这是因为右栏中的图片比 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 - 如何在 Bootstrap 行中垂直居中文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37380135/