Why isn't align-items centering along the cross axis?
Question
In my mobile view, I have.nav-links(container) displaying flex and flow-direction set to column. Now, I added align-items to set the cross axis to center but it's not displaying centered in the container. I tried putting a border around the li elements and setting width to 100% but it appears to shows a margin on the left side. I've set margin to 0 and checked to make sure but to no avail. I've only tested this on chrome so far. Any ideas would be great thanks.
const navSlide = () => { const burger = document.querySelector(".burger"); const nav = document.querySelector(".nav-links"); const navLinks = document.querySelectorAll(".nav-links li"); burger.addEventListener("click", ()=>{ // Toggle Nav nav.classList.toggle("nav-active"); // Animate Links navLinks.forEach((link, index) => { if(link.style.animation){ link.style.animation = "" } else { link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 +.5}s`; } }); //burger Animation burger.classList.toggle("toggle"); }); } navSlide();
* { margin: 0; padding: 0; box-sizing: border-box; } nav{ display: flex; justify-content: space-around; align-items: center; min-height: 8vh; background-color: rgb(83, 54, 110); font-family: 'Raleway', sans-serif; }.logo{ color: rgba(226, 226, 226); text-transform: uppercase; letter-spacing: 5px; font-size: 20px; }.nav-links{ display: flex; justify-content: space-around; width: 30%; }.nav-links li{ list-style: none; }.nav-links a{ color: rgba(226, 226, 226); text-decoration: none; letter-spacing: 3px; font-weight: bold; font-size: 14px; }.burger{ display: none; }.burger div{ width: 25px; height: 3px;; background-color: rgba(226, 226, 226); margin: 5px; transition: all 0.3s ease; } @media screen and (max-width:1024px){.nav-links{ width: 60%; } } @media screen and (max-width:768px){ body{ overflow-x: hidden; }.nav-links{ position: absolute; right: 0px; height: 92vh; top: 8vh; background-color: rgb(83, 54, 110); flex-direction: column; align-items: center; width: 50%; transform: translateX(100%); transition: transform 0.5s ease-in; }.nav-links li{ opacity: 0; }.burger{ display: block; cursor: pointer; } }.nav-active{ transform: translateX(0%); } @keyframes navLinkFade{ from{ opacity: 0; transform: translateX(50px); } to{ opacity: 1; transform: translateX(100px); } }.toggle.line1{ transform: rotate(-45deg) translate(-5px, 6px); }.toggle.line2{ opacity: 0; }.toggle.line3{ transform: rotate(45deg) translate(-5px, -6px); }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https.//fonts.googleapis?com/css.family=Raleway&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="normalize.css"> <link rel="stylesheet" type="text/css" href="style.css"> <title>Sushi Gen</title> </head> <body> <nav> <div class="logo"> <h4>Sushi Gen</h4> </div> <ul class="nav-links"> <li> <a href="#">Home</a> </li> <li> <a href="#">Home</a> </li> <li> <a href="#">Home</a> </li> <li> <a href="#">Home</a> </li> </ul> <div class="burger"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> </nav> <script src="sushiGen.js"></script> </body> </html>
1 answers
solution1
2 ACCPTED 2019-11-11 11:49:51
Seems to be caused by the translateX on the li - you are moving it from the middle, 100px to the right.
If you remove that animation, then your links will be centred:
const navSlide = () => { const burger = document.querySelector(".burger"); const nav = document.querySelector(".nav-links"); const navLinks = document.querySelectorAll(".nav-links li"); burger.addEventListener("click", ()=>{ // Toggle Nav nav.classList.toggle("nav-active"); // Animate Links navLinks.forEach((link, index) => { if(link.style.animation){ link.style.animation = "" } else { link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 +.5}s`; } }); //burger Animation burger.classList.toggle("toggle"); }); } navSlide();
* { margin: 0; padding: 0; box-sizing: border-box; } nav{ display: flex; justify-content: space-around; align-items: center; min-height: 8vh; background-color: rgb(83, 54, 110); font-family: 'Raleway', sans-serif; }.logo{ color: rgba(226, 226, 226); text-transform: uppercase; letter-spacing: 5px; font-size: 20px; }.nav-links{ display: flex; justify-content: space-around; width: 30%; }.nav-links li{ list-style: none; }.nav-links a{ color: rgba(226, 226, 226); text-decoration: none; letter-spacing: 3px; font-weight: bold; font-size: 14px; }.burger{ display: none; }.burger div{ width: 25px; height: 3px;; background-color: rgba(226, 226, 226); margin: 5px; transition: all 0.3s ease; } @media screen and (max-width:1024px){.nav-links{ width: 60%; } } @media screen and (max-width:768px){ body{ overflow-x: hidden; }.nav-links{ position: absolute; right: 0px; height: 92vh; top: 8vh; background-color: rgb(83, 54, 110); flex-direction: column; align-items: center; width: 50%; transform: translateX(100%); transition: transform 0.5s ease-in; }.nav-links li{ opacity: 0; }.burger{ display: block; cursor: pointer; } }.nav-active{ transform: translateX(0%); } @keyframes navLinkFade{ from{ opacity: 0; } to{ opacity: 1; } }.toggle.line1{ transform: rotate(-45deg) translate(-5px, 6px); }.toggle.line2{ opacity: 0; }.toggle.line3{ transform: rotate(45deg) translate(-5px, -6px); }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https.//fonts.googleapis?com/css.family=Raleway&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="normalize.css"> <link rel="stylesheet" type="text/css" href="style.css"> <title>Sushi Gen</title> </head> <body> <nav> <div class="logo"> <h4>Sushi Gen</h4> </div> <ul class="nav-links"> <li> <a href="#">Home</a> </li> <li> <a href="#">Home</a> </li> <li> <a href="#">Home</a> </li> <li> <a href="#">Home</a> </li> </ul> <div class="burger"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> </nav> <script src="sushiGen.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
React.js, HTML, CSS: can't figure out why align-items doesn't work
Why isn't cross origin policy enforced?
Why isn't responsive grid stacking items?
D3 align text along the right axis
why isn't jscript displaying my items?
how to make one part of a flex div not follow align-items center?
Div tag centering isn't working with jQuery
Why isn't this group capturing all items that appear in parentheses?
Cannot get D3 y axis and columns to align properly along x axis
Why the page is overflowing both in x and y axis and also not centering vertically?
Related Tags