Bootstrap 4中的等高列+垂直和水平居中内容

时间:2017-09-18 11:50:24

标签: twitter-bootstrap bootstrap-4

我努力尝试使两列高度相同,但仍然水平和垂直对齐第一列中的内容。

这总结了我想要做的事情:

<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

我尝试了很多事情,但我似乎无法做到。

提前致谢。

1 个答案:

答案 0 :(得分:1)

将内容p置于列中...

https://www.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>