Wie man ein floated Bild vertikal ausrichtet

Question

Ich habe dieses floated Bild und ich möchte es auf der linken Seite der Flex-Navbar haben. Das Layout sollte reagieren und das Bild vertikal zur Mitte ausgerichtet sein (vertikal ausrichten: Mitte; funktioniert nicht). Vielen Dank im Voraus!

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

können Sie versuchen, das Logo in die navbar div wie folgt bewegen:

'<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>' 

Und die CSS wie folgt ändern:

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