垂直居中對齊水平菜單中的圖像

-1

我想讓圖像（我的標誌）位於水平位置和頁面頂部的導航菜單的中心。到目前爲止，我的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; 
}

來源

2017-08-15 Ronan Garrison

代碼運作良好，圖像中心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/

來源

2017-08-15 02:59:59

垂直居中對齊水平菜單中的圖像

回答

相關問題