How can I vertically center my image in this div? - html

Question

I am using the following code in my header to display my logo and my navigation. I vertically centered my text with line-height: 90px; but when I try to give my logo vertical-align: middle; it doesn't seem to work. What am I doing wrong?
header {
max-width: 960px;
height: 90px;
margin: 0 auto;
line-height: 90px;
background: #444444;
}
header img {
width: 59px;
height: 32px;
float: left;
}
nav {
float: right;
}
nav ul li {
display: inline-block;
}
nav li:not(:last-child) {
margin: 0px 50px 0px 0px;
}
<header>
<img src="images/logo.png" alt="Logo">
<!-- Bild fehlt noch - SVG -->
<nav>
<ul>
<li>Start
</li>
<li>About me
</li>
<li>Services
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</nav>
</header>

Answer 1

Flexbox can do that:
header {
max-width: 960px;
height: 90px;
margin: 0 auto;
line-height: 90px;
background: #444444;
display: flex;
justify-content: space-between;
align-items: center;
}
header img {
width: 59px;
height: 32px;
}
nav {} nav ul li {
display: inline-block;
}
nav li:not(:last-child) {
margin: 0px 50px 0px 0px;
}
nav ul li a {
color: white;
}
<header>
<img src="http://www.fillmurray.com/59/32" alt="Logo">
<!-- Bild fehlt noch - SVG -->
<nav>
<ul>
<li>Start
</li>
<li>About me
</li>
<li>Services
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</nav>
</header>