How to vertical align text to the center in the bottom left footer

Question

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>

Possible duplicate of [Vertically align text in a div](http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div) — Jon Uleis, Jan 04 '17 at 03:11
@songbird I'm added an answer below,don't forget to tick it if it's useful — Dream Hunter - hashADH, Jan 04 '17 at 03:30

Dream Hunter - hashADH · Answer 1 · 2017-01-04T03:31:39.537

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>

score 0 · Answer 2 · answered Jan 04 '17 at 03:28

You have two to do this:

1- Set line-height.

2- Or set the height itself.

.row-4 {
  
  background-color: lightblue;
  height: 200px;
  line-height: 200px; /* <-- this is what you must define */
  vertical-align: middle;
   vertical-align: middle;
}

h2, em
{
  display: inline-block;
  vertical-align: middle;
  line-height: 14px; /* <-- adjust this */
}

em {
  font-size: 12px;
  font-weight: normal;
  display: block;
  margin-top: 10px;
 }

<footer>
  <div class="row-4">   
    <h2 class="footer-frase">
      McDreamy
      <em class="footer-frase">"It's a beautiful night to save lives"</em>
    </h2>    
  </div>
</footer>

BTW: I did some modifications.

There is also another way, which is using flex containers.

How to vertical align text to the center in the bottom left footer

2 Answers2