如何垂直對齊浮動圖像

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; 
}