CODEWITHSUNDEEP
htmlcssvertical-alignment
songbird159
songbird159

Reputation: 39

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

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"

image of how it currently looks

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>

Upvotes: 2

Views: 4595

Answers (2)

ADH - THE TECHIE GUY
ADH - THE TECHIE GUY

Reputation: 4373

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>

Upvotes: 2

Yaser
Yaser

Reputation: 5719

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.

Upvotes: 0

Related Questions