我的導航欄內容沒有以我的徽標為中心。 我將如何解決這個問題？ CSS 和 HTML
[英]My nav bar contents are not centering on my logo. How would I fix this? CSS and HTML
問題描述
我注意到我的導航欄鏈接與左側的徽標有點偏離中心。 有人會向我解釋如何解決這個問題嗎？ 我附上了屏幕截圖和代碼片段。 我試着做 inline-block 和 float 但仍然把事情頂起來。 我是否應該使用 x 和 y 偏移來定位它們？ 我只想以最好和最有組織的方式做到這一點。
/*Font for logo*/ @font-face { font-family: 'leander'; src: url(/Fonts/LEANDER.TTF); } /* Add a black background color to the top navigation */ .topnav { margin: 0; position: relative; background-color: #141414; overflow: hidden; text-align: center; padding: 14px 20px; box-shadow: 0px 5px 10px black; } /* Style the links inside the navigation bar */ .topnav a { color: white; text-align: center; padding: 30px 16px; text-decoration: none; font-size: 17px; } /*Style for website logo*/ .logo { color: white; font-family: 'leander', sans-serif; text-align: left; float: left; } /*CSS style for the body*/ body { margin: 0; background-color: #262626; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Arclight Web Development</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family="> <link rel="stylesheet" href="app.css"> </head> <body> <div class="topnav"> <div class = "logo"> <span id="A">A</span> <span id="R">R</span> <span id="R">C</span> <span id="R">L</span> <span id="R">I</span> <span id="R">G</span> <span id="R">H</span> <span id="R">T</span> </div> <a class="active" href="#home">Home</a> <a href="#projects">Projects</a> <a href="#about">Meet the Dev</a> <a href="#contact">Contact</a> </div> <script src="app.js"></script> </body> </html>
3 個解決方案
解決方案1
0 2022-06-26 04:47:42
考慮使用
顯示：網格；
在 topnav 選擇器中，它是制作導航欄的常用方法。
通過給出 ` 來分割導航大小
網格模板列：1fr 1fr 1fr；
您還需要將導航欄鏈接包裝到單個<div></div> 。
@font-face { font-family: 'leander'; src: url(/Fonts/LEANDER.TTF); } body { margin: 0; background-color: #262626; } .topnav { /* position: relative; */ display: grid; grid-template-columns: 1fr 1fr 1fr; background-color: #141414; /* overflow: hidden; */ text-align: right; padding: 14px 20px; box-shadow: 0px 5px 10px black; } .topnav a { /* position: relative; */ color: white; text-align: center; padding: 30px 16px; text-decoration: none; font-size: 17px; } .logo { /* position: absolute; */ /* top: 50%; Important for vertical centered element */ /* transform: translateY(-50%); vertically centered */ color: white; font-family: 'leander', sans-serif; text-align: left; /* float: left; */ }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Arclight Web Development</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=" /> <link rel="stylesheet" href="index.css" /> </head> <body> <div class="topnav"> <div class="logo"> <span id="A">A</span> <span id="R">R</span> <span id="R">C</span> <span id="R">L</span> <span id="R">I</span> <span id="R">G</span> <span id="R">H</span> <span id="R">T</span> </div> <div> <a class="active" href="#home">Home</a> <a href="#projects">Projects</a> <a href="#about">Meet the Dev</a> <a href="#contact">Contact</a> </div> </div> <script src="app.js"></script> </body> </html>
解決方案2
0 2022-06-26 04:55:33
存檔此結果的簡單方法是使用 flex 或 grid。 例如，您可以添加nav元素來包裝 Links 之類的東西
<div class="topnav">
<div class="logo">
<span id="A">A</span>
<span id="R">R</span>
<span id="C">C</span>
<span id="L">L</span>
<span id="I">I</span>
<span id="G">G</span>
<span id="H">H</span>
<span id="T">T</span>
</div>
<nav>
<a class="active" href="#home">Home</a>
<a href="#projects">Projects</a>
<a href="#about">Meet the Dev</a>
<a href="#contact">Contact</a>
</nav>
而不是在你的 CSS 中，你可以使用flex來對齊topnav中的元素，就像這樣
.topnav {
display: flex;
align-items:center;
justify-content: space-around;
}
align-items:center在這種情況下將采用橫軸的中心元素
解決方案3
-1 2022-06-26 03:34:49
給出position: absolute; 到.logo 。
通過添加頂部使徽標居中top: 50%; transform: translateY(-50%); top: 50%; transform: translateY(-50%); .logo的屬性。
其余代碼從一開始就被組織起來。
@font-face { font-family: 'leander'; src: url(/Fonts/LEANDER.TTF); } body { margin: 0; background-color: #262626; } .topnav { position: relative; background-color: #141414; overflow: hidden; text-align: right; padding: 14px 20px; box-shadow: 0px 5px 10px black; } .topnav a { position: relative; color: white; text-align: center; padding: 30px 16px; text-decoration: none; font-size: 17px; } .logo { position: absolute; top: 50%; /*Important for vertical centered element*/ transform: translateY(-50%); /*vertically centered*/ color: white; font-family: 'leander', sans-serif; text-align: left; float: left; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Arclight Web Development</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family="> <link rel="stylesheet" href="app.css"> </head> <body> <div class="topnav"> <div class="logo"> <span id="A">A</span> <span id="R">R</span> <span id="C">C</span> <span id="L">L</span> <span id="I">I</span> <span id="G">G</span> <span id="H">H</span> <span id="T">T</span> </div> <a class="active" href="#home">Home</a> <a href="#projects">Projects</a> <a href="#about">Meet the Dev</a> <a href="#contact">Contact</a> </div> <script src="app.js"></script> </body> </html>
如何使我的徽標 go 向左，我的導航欄圖標在中間？
[英]How do I make my logo go towards the left and my nav bar icons in the middle?
如何編輯wordpress網站主菜單欄的html？ （想在上面添加網站徽標）
[英]How do I edit the html of my wordpress site's main menu bar? (would like to add a site logo to it)
我的代碼 HTML 和 CSS 是否正確，如何僅向導航欄中的文本添加懸停效果？
[英]Is my code HTML and CSS proper, and how do I add a hover effect to just the text in the nav bar?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.