플로팅 된 이미지를 수직으로 정렬하는 방법

Question

나는이 플로팅 된 이미지를 가지고 있으며 flex-navbar의 왼쪽에이 이미지를 갖고 싶습니다. 레이아웃은 반응 적이어야하고 이미지는 가운데에 수직으로 정렬되어야합니다 (수직 정렬 : 중간, 작동하지 않음). 미리 감사드립니다.

'<div class="container"> 
    <div id="navbar"> 
     <a href="#"><img id="logo" src="http://brandmark.io/logo-rank/random/apple.png" alt=""/></a> 
     <a href="#">Home</a> 
     <a href="#">About U</a> 
     <a href="#">Our Service</a> 
     <a href="#">Our Products</a> 
     <a href="#">Contac</a> 
    </div> 
</div>' 

을 그리고이 같은 CSS 변경 :

https://jsfiddle.net/wonrpfsc/

<div class="container"> 
     <a href="#"><img id="logo" src="http://brandmark.io/logo-rank/random/apple.png" alt=""/></a> 
    <div id="navbar"> 
     <a href="#">Home</a> 
     <a href="#">About U</a> 
     <a href="#">Our Service</a> 
     <a href="#">Our Products</a> 
     <a href="#">Contac</a> 
    </div> 
</div> 

#navbar { 
    display: flex; 
} 

#navbar a { 
    flex: 1 1 0; 
    text-align: center; 
    padding: 10px; 
    border: 1px solid black; 
} 

#logo { 
    width: 10vw; 
    height: 10vw; 
    float: left; 
    vertical-align: middle; 
} 

Answer 1

이 같은 메뉴 바의 DIV에 로고를 이동 시도 할 수

을

#navbar { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}