-1

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>
Alexandre B.
  • 5,387
  • 2
  • 17
  • 40
Khashayar
  • 47
  • 2
  • 15

2 Answers2

1

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>
neicore
  • 99
  • 1
  • 7
0

You could try doing something like this:

.header_logo {
  display: flex;
  align-items: center;
  justify-center: center;
  position: relative;
  float: left;
}

  • Vertically: align-items: center;

  • Horizontally: justify-content: center;

Aquapha
  • 13
  • 3