Search code examples
htmlcssvertical-alignment

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


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>