我正在努力尝试使两列具有相同的高度,但仍然水平和垂直对齐第一列中的内容。
这总结了我正在尝试做的事情:
<div class="row">
<div class="col-lg-4 align-self-center">
<p>Text here should be centered both horizontally and vertically. But this col should have the same height as the col containing the image.</p>
</div>
<div class="col-lg-8">
<img class="img-fluid" src="http://via.placeholder.com/1920x1080">
</div>
您也可以在这里查看:https://www.codeply.com/go/bGhFGn8nqq
我尝试了多种方法,但似乎无法做到正确。
提前致谢。
最佳答案
将内容p
放在列内居中...
https://codeply.com/go/lyPAOH1Tq2
<div class="row">
<div class="col-lg-4 d-flex">
<p class="my-auto">Text here should be centered both horizontally and vertically. But this col should have the same height as the col containing the image.</p>
</div>
<div class="col-lg-8">
<img class="img-fluid" src="http://via.placeholder.com/1920x1080">
</div>
</div>
关于twitter-bootstrap - Bootstrap 4 中的等高列+垂直和水平居中内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46278566/