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