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>
You just need to add:
.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>