如何垂直对齐浮动图像答案

【问题标题】：how to vertically align a floated image如何垂直对齐浮动图像
【发布时间】：2018-03-17 14:49:39
【问题描述】：

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

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

【问题讨论】：

请使用代码示例显示您的问题示例。
见上面的jsfiddle
对不起。我想我要失明了。

标签： html css image vertical-alignment floating

【解决方案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;
}

【讨论】：