[FIXED] How to vertical align text to the center in the bottom left footer

Issue

It is a single row made of 3 columns. I want to make the "h5 class:footer-small" vertical aligned to the div "class: col-1"

I found out that using display: inline-block, it made the text vertical aligned in the center. But I did not understand how was it possible? Can someone explain why using display:inline-block worked?

HTML

<footer>
      <div class="row-4">
        <div class="col-1">
          <p class="col-1">
            <h5 class="footer-small">Seattle<br>Grace<br>Hospital</h5>
          </p>
        </div>
        <div class="col-5">
          <h5 class="footer-desc">He is a Bowdoin College graduate and attended Columbia University College <br>of Physicians and Surgeons</h5>
        </div>
        <div class="col-6">
          <h2 class="footer-frase">McDreamy</h2>
            <em class="footer-frase">"It's a beautiful night to save lives"</em>
        </div>
      </div>
    </footer>

Solution

you can simply do it using css3 flexbox concept

add the following styles to your col-1

• display:flex;

• align-items:center;

• justify-content:center;

Note: you can't declare a header tag (<h1>,<h2>,etc..) inside a paragraph tag(<p>) ,so replace it by <span> tag or any other tags

div.row-4{
  display:flex;
  color:#fff;
  }

div.row-4 div{
  padding:5px;
  }
.col-6{
  background:#73819b;
  flex:2;
  }
.col-5{
  background:#438cab;
  flex:2;
  }
.col-1{
  background:#438cab;
  display:flex;
  align-items:center;
  justify-content:center;
  }

<footer>
      <div class="row-4">
        <div class="col-1">
          <span class="col-1">
            <h5 class="footer-small">Seattle<br>Grace<br>Hospital</h5>
          </span>
        </div>
        <div class="col-5">
          <h5 class="footer-desc">He is a Bowdoin College graduate and attended Columbia University College <br>of Physicians and Surgeons</h5>
        </div>
        <div class="col-6">
          <h2 class="footer-frase">McDreamy</h2>
            <em class="footer-frase">"It's a beautiful night to save lives"</em>
        </div>
      </div>
    </footer>

Answered By - ADH - THE TECHIE GUY

Answer Checked By - Gilberto Lyons (PHPFixing Admin)