在水平菜单中垂直居中对齐图像答案

【问题标题】：Vertically center align image in horizontal menu在水平菜单中垂直居中对齐图像
【发布时间】：2017-08-16 20:38:39
【问题描述】：

我希望有一个图像（我的徽标）位于我的导航菜单的最中心，该菜单是水平的并且位于我的页面顶部。到目前为止，我的 topnav div 中的每个标签（包括我的图像）分布均匀。我希望徽标两侧的元素均匀分布，但我希望我的图像位于中间。也许我应该在同一行使用两个 div 并将徽标粘贴在中间？

这是我的 HTML

<div class="topnav" id="myTopnav" >
    <a href="Home%20Page.html">Sustainability</a>
    <a href="Environment.html">Climate Change</a>
    <img src="Images/Climate-Hikewhite.png" height="50px" href="Home%20Page.html" />
    <a href="DIY.html">Help At Home</a>
    <a href="Contact.html">Contact Us</a>  
</div>

这是我的 CSS

/*NAVIGATION BAR */
/* Add a black background color to the top navigation */

.topnav {
background-color: #000;
overflow: hidden;
list-style: none;
margin: 0;
padding-top: 5px;
padding-bottom: 5px;
display: flex;
justify-content: space-around;
text-decoration: none;
font-size: 24px;
color: #000;
width: 100%;
}

/* Style the links inside the navigation bar */
.topnav a {
list-style: none;
margin: 0 2px;
padding-top: 10px;
padding-bottom: 5px;
display: flex;
justify-content: space-around;
text-decoration: none;
font-size: 17px;
color: #EEE;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;


}
.titletext {
list-style: none;
margin: 0 2px;
padding-top: 10px;
padding-bottom: 5px;
display: flex;
justify-content: space-around;
text-decoration: none;
font-size: 17px;
color: #FFF;
font-family: Papyrus, fantasy;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #000;
color: green;
}

/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}

【问题讨论】：

您的代码运行良好，图像垂直居中。哪里出错了？
改变浏览器的宽度可以看到off centered-ness

标签： html css flexbox nav

【解决方案1】：

好吧，我想我知道你在说什么。您是否想说您的锚元素没有垂直居中在您的 .topnav 上？如果是这样，那么您应该将 align-items: center 添加到您的 .topnav CSS 样式中。所以你的 .topnav CSS 应该是这样的：

.topnav {
background-color: #000;
overflow: hidden;
enter code here list-style: none;
margin: 0;
padding-top: 5px;
padding-bottom: 5px;
display: flex;
justify-content: space-around;
text-decoration: none;
font-size: 24px;
color: #000;
width: 100%;
align-items: center;
}

您可以在此处阅读有关align-items 的更多信息：https://css-tricks.com/almanac/properties/a/align-items/

【讨论】：