How to vertically center text in my Bootstrap 4 column

Question

I have one particular column where i can't seem to vertically center the content inside my Bootstrap 4 column. I have tried adding the classes my-auto and/or align-self-center to no avail. (Although align-self-center seems to be working on another column's content.)

I am trying to vertically center the text inside the #jumboNote div here:

<div id="jumbo" class="row">
      <div id="jumboNote" class="my-auto align-self-center col-md-3">
        <h3>I want to vertically align this text in this div, like the animals list in the center div above</h3>
      </div>
</div>

Here is my fiddle so you can better see my desired outcome:

https://jsfiddle.net/Katrina_B/8L5hzsxp/

(Please view the fiddle in a wide browser.)

thank you in advance of any tips to achieve this.

Answer 1

Since you want to vertically align the text in the center, I have used text-align: center in the css property.

#mainCont {
  background-color: #9bf49a;
  padding: 0;
  margin: 0;
}

header {
  background-color: #e8b7e2;
}

#logo {
  background-color: #6acaf7;
  padding: 0;
  margin: 0;
}

#logo img {
  width: 100%;
  heght: auto;
}

#animals {
  background-color: #f9efa4;
  text-align: center;
}

#animals ul {
  padding: 0;
  margin: 0;
}

#music {
  background-color: #f776c6;
}

.main-navigation {
  width: 100%!important;
  display: inline-block;
  background-color: #005552;
  text-transform: uppercase;
  font-weight: 300;
}

.main-navigation ul {
  list-style: none;
  padding-left: 0;
  padding: 0!important;
  margin: 0!important;
}

.main-navigation ul ul {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  float: left;
  position: absolute;
  top: 100%;
  left: -999em;
  z-index: 99999;
  color: #005552;
}

.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}

.main-navigation ul ul li:hover>ul,
.main-navigation ul ul li.focus>ul {
  left: 100%;
}

.main-navigation ul ul a {
  width: 250px;
  background-color: #FFF;
  color: #006666;
}

.main-navigation ul ul a:hover {
  background-color: #33CC99;
  color: #FFF;
}

.main-navigation ul li:hover>ul,
.main-navigation ul li.focus>ul {
  left: auto;
}

.main-navigation li {
  float: right;
  position: relative;
  margin: 0!important;
  padding: 0!important;
}

.main-navigation a {
  display: block;
  text-decoration: none;
  padding: 10px 15px;
  color: #fff;
  background-color: #005552;
}

.main-navigation a:hover {
  text-decoration: none;
  color: #33CC99;
}

#jumbo {
  background-image: url(http://funnyneel.com/image/files/i/01-2014/beautiful-trees-branched-out.jpg);
  background-size: cover;
  background-repeat: none;
  background-position: center;
  border: 3px solid #f7892e;
}

#jumboNote {
  font-style: italic;
  background-color: #000;
  opacity: 0.7;
  padding: 20px;
  height: 100%;
}

#jumboNote h3 {
  font-size: 17px;
  color: #FFF;
  text-align: center;
}

<div id="headerContainer" class="container-fluid">

  <header class="row row-eq-height">

    <div id="logo" class="col-md-3">
      <img src="https://i.pinimg.com/originals/8b/58/61/8b5861d8fa21ae898d776631a587acb8.jpg">
    </div>
    <!--logo-->

    <div id="animals" class="align-self-center col-md-6">
      <ul class="list-unstyled list-inline">
        <li class="list-inline-item">Giraffes</li>
        <li class="list-inline-item">Elephants</li>
        <li class="list-inline-item">Donkeys</li>
      </ul>
    </div>

    <div id="music" class="col-md-3">
      <ul class="list-unstyled list-inline">
        <li>Plena</li>
        <li>Danza</li>
        <li>Bomba</li>
      </ul>
    </div>
    <!--social-->

  </header>
  <!--header-->

  <div class="row">

    <nav id="fruits" class="main-navigation">
      <ul>

        <li><a href="#">Oranges</a></li>
        <li><a href="#">Lemons</a></li>
        <li><a href="#">Papaya</a></li>
        <li><a href="#">Snowstorms & Weather</a>
          <ul>
            <li><a href="#">Ice cold</a></li>
            <li><a href="#">Cold winds</a></li>
            <li><a href="#">Freezing temperatures</a></li>
          </ul>
        </li>
        <li><a href="#">Raspberry</a></li>
        <li><a href="#">Apples & Pears</a>
          <ul>
            <li><a href="#">Green</a></li>
            <li><a href="#">Red</a></li>
            <li><a href="#">Delicious</a></li>
          </ul>
        </li>
      </ul>
    </nav>

  </div>

</div>
<!--headerContainer-->


<div id="jumbo" class="row">
  <div id="jumboNote" class="my-auto align-self-center col-md-3">
    <h3>I want to vertically align this text in this div, like the animals list in the center div above</h3>
  </div>
</div>

Answer 2

Getting flex working with vertically centering can be a bit of a pain sometimes.

In order to align an item, the parent item needs to be flexed. So the solution is to add d-flex to your column to ensure that it's displaying correctly and then adding align-self-center to the child ul element.

---

Solution with bootstrap classes

<div id="music" class="col-md-3 d-flex">
  <ul class="list-unstyled m-0 align-self-center">
    <li>Plena</li>
    <li>Danza</li>
    <li>Bomba</li>
  </ul>
</div>

- note that I've removed list-inline as it was redundant with list-unstyled