[FIXED] How to vertically center an img as svg format in a div?

Issue

I am wondering how do I vertically center my logo, which happens to be in a svg format. I am not sure if it makes any difference, than to an .jpg file or so, but I think yes.

.main_header {
  background-color: red;
  height: 3.5em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.main_navigation a {
  color: white;
}

.header_logo {
  float: left;
  position: relative;
}

.header_logo img {
  vertical-align: middle;
}

.main_navigation {
  float: left;
}

<header class="main_header">
  <div class="header_logo">
    <a href="https://www.keeper-club.net/">
      <img src="img/Keeper_Club_Logo.svg" alt="Keeper Club Logo" width="100px" height="100">
    </a>
  </div>
  <nav class="main_navigation">
    <ul>
      <a href="https://www.keeper-club.net/startseite/">Startseite</a>
      <a href="https://www.keeper-club.net/ueber-uns/">Über uns</a>
      <a href="https://www.keeper-club.net/torwarttraining/">Torwarttraining</a>
      <a href="https://www.keeper-club.net/trainer/">Trainer</a>
      <a href="https://www.keeper-club.net/kontakt/">Kontakt</a>
    </ul>
  </nav>
</header>

Solution

You just need to add:

• display: flex;
• align-items: center;

.main_header {
  background-color: red;
  height: 3.5em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  display: flex;
  align-items: center;
}

.main_navigation a {
  color: white;
}

.header_logo {
  float: left;
  position: relative;
}

.header_logo img {
  vertical-align: middle;
}

.main_navigation {
  float: left;
}

<header class="main_header">
    <div class="header_logo"> <a href="https://www.keeper-club.net/"> <img src="img/Keeper_Club_Logo.svg"
                alt="Keeper Club Logo" width="100px" height="100"> </a> </div>
    <nav class="main_navigation">
        <ul> <a href="https://www.keeper-club.net/startseite/">Startseite</a> <a
                href="https://www.keeper-club.net/ueber-uns/">Über uns</a> <a
                href="https://www.keeper-club.net/torwarttraining/">Torwarttraining</a> <a
                href="https://www.keeper-club.net/trainer/">Trainer</a> <a
                href="https://www.keeper-club.net/kontakt/">Kontakt</a> </ul>
    </nav>
</header>

Answered By - neicore

Answer Checked By - Mildred Charles (PHPFixing Admin)