Wie kann ich mein Bild in diesem div vertikal zentrieren?

Question

Ich verwende den folgenden Code in meiner Kopfzeile, um mein Logo und meine Navigation anzuzeigen. Ich zentrierte meinen Text vertikal mit line-height: 90px;, aber wenn ich versuche, mein Logo vertical-align: middle; zu geben, scheint es nicht zu funktionieren. Was mache ich falsch?

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><a href="#">Start</a> 
 
     </li> 
 
     <li><a href="#">About me</a> 
 
     </li> 
 
     <li><a href="#">Services</a> 
 
     </li> 
 
     <li><a href="#">Portfolio</a> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 

 
</header>

Answer 1

Flexbox kann das tun:

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><a href="#">Start</a> 
 
     </li> 
 
     <li><a href="#">About me</a> 
 
     </li> 
 
     <li><a href="#">Services</a> 
 
     </li> 
 
     <li><a href="#">Portfolio</a> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 

 
</header>