어떻게 이미지를이 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>