如何垂直对齐浮动图像

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