汉堡响应式导航栏 Alignment: CSS Flexbox

Question

So this is a very focused question所以这是一个非常集中的问题

First of all, I want you to execute the code in full screen首先，我希望你全屏执行代码
Please inspect the code and set it to a mobile width ( This is a problem with responsiveness )请检查代码并将其设置为移动宽度（这是响应性问题）
Now, open the hamburger menu现在，打开汉堡菜单
As you can see in this image , The links of the navbar are not centered in the y axis正如您在这张图片中看到的那样，导航栏的链接不在 y 轴上居中
Even though I have clearly included justify content and align items in the below code即使我在下面的代码中明确包含了证明内容和对齐项目

Code:代码：

 /* CSS Setup And Reset */ @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap"); @font-face { font-family: AstroSpace; src: url(/fonts/AstroSpace.ttf); } body { margin: 0; padding: 0; font-family: "Montserrat", sans-serif; background-color: #265eac; color: white; } header { background-color: #2c304b; position: sticky; top: 0; right: 0; width: 100%; margin-bottom: 20px; } /* Navbar */.main-nav { height: 90px; }.logo { color: white; line-height: 90px; font-size: 30px; font-weight: 900; text-decoration: none; margin-left: 30px; font-family: "Roboto ", sans-serif; }.navlinks { list-style: none; float: right; line-height: 90px; margin: 0; padding: 0; }.navlinks li { display: inline-block; margin: 0px 20px; }.navlinks li a { color: white; text-decoration: none; font-size: 18px; transition: all 0.3s linear 0s; text-transform: uppercase; }.navlinks li a:hover { color: #7ebcb9; padding-bottom: 7px; border-bottom: 2px solid #7ebcb9; } li a.contact { background-color: #00adb5; padding: 9px 20px; border-radius: 50px; transition: all 0.3s ease 0s; border-bottom: none; } li a.contact:hover { background-color: #047e85; color: white; border-bottom: none; } #check { display: none; }.menu-btn { font-size: 25px; color: white; float: right; line-height: 90px; margin-right: 40px; display: none; cursor: pointer; } /* Responsive Design */ /* As you can see, justify content and align items are included, but the links are not centere */ @media (max-width: 800px) {.navlinks { position: fixed; top: 90px; ; width: 100%; height: 100vh; transition: all 0.5s; right: -100%; background: #222831; display: flex; align-items: center; flex-direction: column; justify-content: center; }.navlinks li { display: block; }.navlinks li a { font-size: 20px; }.navlinks li a:hover { border-bottom: none; }.menu-btn { display: block; } #check:checked~.navlinks { right: 0; } #check:checked~header { margin: 0; } } @media (max-width: 360px) {.logo { margin-left: 10px; font-size: 25px; }.menu-btn { margin-right: 10px; font-size: 25px; }.menu-btn:focus { color: blue; } }

 <,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>Responsive Navbar</title> <link rel="stylesheet" href="styles/styles:css" /> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min:css" /> <link href="https.//fonts.googleapis?com/css2:family=Open+Sans;wght@400:800&family=Quicksand:wght@300&family=Roboto.wght@900&display=swap" rel="stylesheet"> <style> </style> </head> <body> <header> <nav class="main-nav"> <input type="checkbox" id="check" /> <label for="check" class="menu-btn"> <i class="fas fa-bars"></i> </label> <a href="index.html" class="logo">Nikita Gada</a> <ul class="navlinks"> <li><a href="#" id="link1" onmousedown="myfun()" onmouseup="myfun2()">About Me</a></li> <li><a href="#" id="link3" onmousedown="myfun5()" onmouseup="myfun6()">Work</a></li> <li><a href="#" id="link2" onmousedown="myfun3()" onmouseup="myfun4()">Services</a></li> <li><a href="#" class="contact">Contact</a></li> </ul> </nav> </header>

Answer 1

In this case, I would set the height dynamically with calc Css function, that should fix the problem.在这种情况下，我将使用calc Css function 动态设置height ，这应该可以解决问题。 Just subtract the height of the navbar .main-nav: 90px to adjust, center the navLinks vertically like this height: calc(100vh - 90px) .只需减去导航栏的height .main-nav: 90px进行调整，将 navLinks 垂直居中，如下height: calc(100vh - 90px) 。 I hope You will be content;我希望你会满足； Best regards.-) Below my example with changes.最好的问候。-) 下面我的例子有变化。

 /* CSS Setup And Reset */ @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap"); @font-face { font-family: AstroSpace; src: url(/fonts/AstroSpace.ttf); } body { margin: 0; padding: 0; font-family: "Montserrat", sans-serif; background-color: #265eac; color: white; } header { background-color: #2c304b; position: sticky; top: 0; right: 0; width: 100%; margin-bottom: 20px; } /* Navbar */.main-nav { height: 90px; }.logo { color: white; line-height: 90px; font-size: 30px; font-weight: 900; text-decoration: none; margin-left: 30px; font-family: "Roboto ", sans-serif; }.navlinks { list-style: none; float: right; line-height: 90px; margin: 0; padding: 0; }.navlinks li { display: inline-block; margin: 0px 20px; }.navlinks li a { color: white; text-decoration: none; font-size: 18px; transition: all 0.3s linear 0s; text-transform: uppercase; }.navlinks li a:hover { color: #7ebcb9; padding-bottom: 7px; border-bottom: 2px solid #7ebcb9; } li a.contact { background-color: #00adb5; padding: 9px 20px; border-radius: 50px; transition: all 0.3s ease 0s; border-bottom: none; } li a.contact:hover { background-color: #047e85; color: white; border-bottom: none; } #check { display: none; }.menu-btn { font-size: 25px; color: white; float: right; line-height: 90px; margin-right: 40px; display: none; cursor: pointer; } /* Responsive Design */ /* As you can see, justify content and align items are included, but the links are not centere */ @media (max-width: 800px) {.navlinks { position: fixed; top: 90px; ; width: 100%; height: calc(100vh - 90px); /* height: 100vh; */ transition: all 0.5s; right: -100%; background: #222831; display: flex; align-items: center; flex-direction: column; justify-content: center; }.navlinks li { display: block; }.navlinks li a { font-size: 20px; }.navlinks li a:hover { border-bottom: none; }.menu-btn { display: block; } #check:checked~.navlinks { right: 0; } #check:checked~header { margin: 0; } } @media (max-width: 360px) {.logo { margin-left: 10px; font-size: 25px; }.menu-btn { margin-right: 10px; font-size: 25px; }.menu-btn:focus { color: blue; } }

 <,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>Responsive Navbar</title> <link rel="stylesheet" href="styles/styles:css" /> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min:css" /> <link href="https.//fonts.googleapis?com/css2:family=Open+Sans;wght@400:800&family=Quicksand:wght@300&family=Roboto.wght@900&display=swap" rel="stylesheet"> <style> </style> </head> <body> <header> <nav class="main-nav"> <input type="checkbox" id="check" /> <label for="check" class="menu-btn"> <i class="fas fa-bars"></i> </label> <a href="index.html" class="logo">Nikita Gada</a> <ul class="navlinks"> <li><a href="#" id="link1" onmousedown="myfun()" onmouseup="myfun2()">About Me</a></li> <li><a href="#" id="link3" onmousedown="myfun5()" onmouseup="myfun6()">Work</a></li> <li><a href="#" id="link2" onmousedown="myfun3()" onmouseup="myfun4()">Services</a></li> <li><a href="#" class="contact">Contact</a></li> </ul> </nav> </header>

汉堡响应式导航栏 Alignment: CSS Flexbox

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-11-25 10:33:42

汉堡响应式导航栏 Alignment: CSS Flexbox

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-11-25 10:33:42

解决方案1
1 已采纳 2021-11-25 10:33:42