0

I want to vertically center the text in the second column. I've tried all the usual advice: my-auto, align-items-center, etc but I can't seem to get it right.

Can anyone point me in the right direction?

<div class="row justify-content-center">
        <div class="col-1" style="background-color: #cfdc27">
        </div>
        <div class="col-10 d-flex">
          <div class="my-auto">
            <h4>Title goes here</h4>
            <p class="text-muted">Subtitle goes here.</p>
          </div>
        </div>
      </div>

https://codepen.io/anon/pen/dExRQJ

Seamus
  • 699
  • 1
  • 6
  • 12
  • 1
    note the first sentence of the accepted answer : *Vertical center is relative to the height of the parent*. In your case there is nothing to align because the parent height is defined by the text – Temani Afif Jun 08 '19 at 10:56
  • In the second column create one more row with `col-12` inside this row then put the text inside the column – chirag soni Jun 08 '19 at 10:59
  • Or you can do one more thing just use `text align="centre"` – chirag soni Jun 08 '19 at 11:00
  • @chiragsoni Updated pen with your suggestions but can't seem to get it working. https://codepen.io/anon/pen/dExRQJ Text is still top aligned, rather than in the middle/vertically centered. – Seamus Jun 08 '19 at 12:53

0 Answers0