我的导航栏内容没有以我的徽标为中心。 我将如何解决这个问题？ CSS 和 HTML
[英]My nav bar contents are not centering on my logo. How would I fix this? CSS and HTML
问题描述
I noticed my nav bar links were a bit off-centered with my logo on the left.
我注意到我的导航栏链接与左侧的徽标有点偏离中心。 Would someone explain to me how I can fix this?有人会向我解释如何解决这个问题吗？ I attached a screenshot and code snippets.我附上了屏幕截图和代码片段。 I tried doing inline-block and float but still jacked things up.我试着做 inline-block 和 float 但仍然把事情顶起来。 Should I position them using the x and y offsets or not?我是否应该使用 x 和 y 偏移来定位它们？ I just want to do this in the best and most organized way.我只想以最好和最有组织的方式做到这一点。
/*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
Consider to use考虑使用
display: grid;
in topnav selector, its common way to make navbar.在 topnav 选择器中，它是制作导航栏的常用方法。
Sparate the nav size by giving `通过给出 ` 来分割导航大小
grid-template-columns: 1fr 1fr 1fr;
also you need to wrap your nav bar links to single <div></div> .您还需要将导航栏链接包装到单个<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
the easy way to archive this result is to use either flex or grid.存档此结果的简单方法是使用 flex 或 grid。 you can for example add nav element to wrap Links something like例如，您可以添加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>
and than in you CSS you can use flex to align element inside topnav like so而不是在你的 CSS 中，你可以使用flex来对齐topnav中的元素，就像这样
.topnav {
display: flex;
align-items:center;
justify-content: space-around;
} }
align-items:center in this case will take of center elements in cross axis align-items:center在这种情况下将采用横轴的中心元素
解决方案3
-1 2022-06-26 03:34:49
Give position: absolute;给出position: absolute; to .logo .到.logo 。
Center the logo by adding top: 50%; transform: translateY(-50%);通过添加顶部使徽标居中top: 50%; transform: translateY(-50%); top: 50%; transform: translateY(-50%); properties to .logo . .logo的属性。
Rest of code was organized from start.其余代码从一开始就被组织起来。
@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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.