How can I vertically center text in footer?

byMR

March 13, 2023

I am trying to center the contents of my footer vertically, but I can not seem to do so.

Here is what it looks like:
Bad Footer

This is what I want it to look like:
Good Footer

Here is my current HTML and CSS code:

<div class="footer">
    ©2023 First Last
    <a href="#top">Go Up</a>
    <a href="https://github.com/"><img src="../static/GitLogo.png" alt="my github"></a>
</div>

.footer{
    background-color: #252525;
    position:absolute;
    top:250%;
    left:0;
    width:100%;
    height: 5%;
    overflow: hidden;
    z-index: 999;
    color: #C967F0;
    text-align: left;
}

.footer a{
    font-size: 1vw;
    color: #C967F0;
    margin-left: 35%;
}

.footer a img{
    width: 2%;
    height: 70%;
    padding: 0.5% 0.8%;
}

>Solution :

You should use a flexbox.
With justify-content you can determine how your content is layed out on the primary axis (which is in x direction by default => flex-direction: row;) and with align-items you control how content is placed in the secondary axis (which consequently is y by default).

The link I provided will explain those and more CSS properties for a Flexbox in detail with some illustrations to see what exactly they do.

.footer {
  height: 50px;
  background: red;
   /* use flexbox*/
  display: flex;
  /* vertically center items */
  align-items: center;
  /* spread items out */
  justify-content: space-between;
}

<div class="footer">
    <p>©2023 First Last</p>
    <a href="#top">Go Up</a>
    <a href="https://github.com/"><img src="../static/GitLogo.png" alt="my github"></a>
</div>