画像をこの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

フレキシボックスは、それを行うことができます：ねえ、あなたが同じのための1つのフィドルを作ることができます

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>