Html 如何垂直对齐浮动图像

我有这个浮动图像，我想把它放在flex导航栏的左侧。布局应该是响应性的，并且图像垂直对齐到中间（垂直对齐：中间；不起作用）。 提前谢谢

---

您可以尝试将徽标移动到导航栏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>'

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

---

请使用代码示例演示您的问题示例。请参阅JSFIDLE。我想我要失明了。

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

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