РЕДАКТИРОВАТЬ: У меня теперь есть jsfiddle [https://jsfiddle.net/martinradio/jshet597/8/] (убедитесь, что изменили размер части html влево, чтобы два блока выглядели рядом)
Здравствуйте, у меня Box1 и Box2 бок о бок, Box1 всегда будет содержать меньше текста, чем Box2, поэтому я пытаюсь сделать так, чтобы Box1 центрировал свой текст и растянул ширину / высоту блока, чтобы соответствовать пространство доступно благодаря Box2 (справа)
<div class="container-fluid">
<div class="row">
<!-- Box1 (left) -->
<div class="col-md-4">
<div class="card mb-4 box-shadow" style=height:100%>
<div class="card-body ">
<div class="row ">
Box1 text
</div> <!-- / .row -->
</div>
</div>
</div> <!-- /col -->
<!-- Box2 (right) -->
<div class="col-md-8">
<div class="card mb-4 box-shadow" style=height:100%>
<div class="card-body">
<div class="row align-items-center mb-4">
<div class="col">
Box 2 text ...
</div>
</div>
</div>
</div>
</div>
Я хочу, чтобы текст Box1 центрировался, а ширина и высота блока по-прежнему совпадали с Box2. На изображении выше ширина и высота отзывчивы и безупречны, но текст не центрирован.
Если я добавлю 'my-auto' к определению col в box1 следующим образом:
<!-- Box1 (left) -->
<div class="col-md-4 my-auto">
Он попадает туда частично, текст теперь центрирован (хорошо!), Но в окне нет заполните пустое место, чтобы соответствовать Box2
Есть ли способ стилизовать мои коробки так, чтобы текст Box1 был центрирован, а также заполнить пустое пространство, соответствующее размеру Box2?
Спасибо