Question

我想要一个图像（我的徽标）位于我的导航菜单的中心，该菜单是水平的，位于我的页面顶部。到目前为止，我的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;
}

Answer 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/

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

1 个答案: