Как я могу вертикально центрировать свое изображение в этом div?

Question

Я использую следующий код в своем заголовке для отображения моего логотипа и моей навигации. Я вертикально сосредоточил свой текст на line-height: 90px;, но когда я пытаюсь дать свой логотип vertical-align: middle;, он, похоже, не работает. Что я делаю не так?

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 можно сделать:

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>