垂直居中对齐水平菜单中的图像

问题描述：

我想让图像（我的标志）位于水平位置和页面顶部的导航菜单的中心。到目前为止，我的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; 
}

代码运作良好，图像中心vertically.where是错的？ – Ehsan

更改浏览器的宽度，您可以看到偏离中心位置的内容 –

答

好吧，我想我知道你在说什么。你是否想说你的主播元素不是垂直居中你的.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/

垂直居中对齐水平菜单中的图像

相关推荐