浮遊画像を垂直に整列する方法

Question

私はこの浮遊画像を持っており、私はそれをflex-navbarの左側に置いておきたいと思います。レイアウトは応答性が高く、イメージは中央に垂直に整列されている必要があります（垂直整列：中間、動作しません）。 ありがとうございます！

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要素の中にロゴを移動してみてくださいすることができます

'<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変更：

を

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