2017-09-18 26 views
0

我努力使两列的高度相同,但仍然水平和垂直对齐第一列中的内容。等高列+引导程序中的垂直和水平居中内容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

我已经试过许多东西,但我可以” t看起来没错。

在此先感谢。

回答

0

中心内容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>