2列布局，居中对齐，同时保持列背景颜色的完整大小

Question

我对bootstrap有点陌生，正在尝试弄清楚如何才能让紫色列保持居中对齐，同时让整个左列变成紫色。

​

​

下面是我的代码到目前为止的样子：

    <div class="container">
<div class="row align-items-center">
  <div class="col col-md-6" style="background-color:#7849b8; height: 100% auto;">
    <div class="headline mt-4 ml-4 mr-4 mb-3">Headline Text Here</div>
    <div class="subline ml-4 mr-4 mb-4">This is Subline text. Ha ahaha<br>Hello</div>
  </div>
  <div class="col col-md-6 p-0" style="background-color:#AEA9F4;">
    <img src="https://via.placeholder.com/490x600" class="img-fluid">
  </div>
</div>

Answer 1

您可以采用几种不同的方法。一种方法是将列内容包装在它自己的div中，并使用flexbox...

<div class="container">
    <div class="row">
        <div class="col col-md-6 d-flex" style="background-color:#7849b8;">
            <div class="align-self-center">
                <div class="headline mt-4 ml-4 mr-4 mb-3">Headline Text Here</div>
                <div class="subline ml-4 mr-4 mb-4">This is Subline text. Ha ahaha<br>Hello</div>
            </div>
        </div>
        <div class="col col-md-6 p-0" style="background-color:#AEA9F4;">
            <img src="https://via.placeholder.com/490x600" class="img-fluid">
        </div>
    </div>
</div>

https://codeply.com/p/IMbHi7jOF6