How can I vertically center text in footer?

Question

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%;
}

score 1 · Accepted Answer · answered Mar 13 '23 at 21:38

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>

How can I vertically center text in footer?

1 Answers1