有没有办法让 LI 在我的导航栏中居中？

Question

我正在按照本指南获取适用于移动设备和网络的响应式导航栏 https://www.youtube.com/watch?v=D-h8L5hgW-w&t=7225s 如果这是一个非常简单的解决方案，请提前致歉。

我很难将导航栏居中。现在它位于左侧。

<body>
    <!-- Navigation bar-->
    <div class="navbar">
        <img id="mobile-cta" class="mobile-menu" src="/images/open.svg" alt="Open Navigation">
        <nav>
            <img id="mobile-exit" class="mobile-menu-exit" src="../images/close.svg" alt="Close Navigation">
            <ul class="primary-nav">
                <li class="current"><a href="../html/index.html">Forside</> </a></li>
                <li><a href="../html/portfolio.html">Portfolio</a></li>
                <li><a href="../html/kontakt.html">Kontakt</a></li>
            </ul>
        </nav>
    </div>
<body>

看起来像这样

Picture of navbar

Picture of mobile version, this one is totally fine

这是我的全部 CSS 导航栏。

  /* Code for Navigation bar */
    .navbar {
        background: white;
        padding: 1em;
        position: sticky;
        top: 0px;
        width: 100%;
    
        /* Hides the navigation menu when on mobile */
        nav {
            display: none;
        }
    
    
        .mobile-menu {
            cursor: pointer;
        }
    
        /* Defines distance from logo and if the list should have dots etc. */
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
    }
    
    nav.menu-btn {
        display: block;
    }
    
      /* Mobile menu navigation */
    nav {
        position: fixed;
        z-index: 999;
        width: 66%;
        right: 0;
        top: 0;
        background: black;
        height: 100vh;
        padding: 1em;
    
        ul.primary-nav {
            margin-top: 5em;
        }
    
        li {
            // Mobile menu text
            a {
                color: white;
                text-decoration: none;
                display: block;
                padding: .5em;
                font-size: 1.5em;
                text-align: right;
    
                &:hover {
                    color: #1e73be;
                }
            }
        }
    }
    
    a {
        display: block;
        position: relative;
        padding: 0em 0;
    }
    
    // Controls the text after animation
    a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0.2em;
        background-color: #1e73be;
        opacity: 0;
        transition: opacity 300ms, transform 300ms;
    }
    
    li a::after {
        opacity: 1;
        transform: scale(0);
        transform-origin: center;
    }
    
    li a:hover::after,
    li a:focus::after {
        transform:scale(1);
        font-weight: bold;
    }
    
    .mobile-menu-exit {
        float: right;
        margin: .5em;
        cursor: pointer;
    }
    
    // Controls when to switch from mobile to website view.
    @media only screen and (min-width: 768px) {
    
        .mobile-menu,
        .mobile-menu-exit {
            display: none;
        }
    
        .navbar nav {
            display: flex;
            justify-content: space-between;
            background: none;
            position: unset;
            height: auto;
            width: 100%;
            padding: 0;
          
            ul {
                display: flex;
                text-align: center;
            }
    
            a {
                color: black;
                font-size: 1em;
                padding: .1em 1em;
               
            }
            ul.primary-nav {
                margin: 0;
            }
    
            // CSS for the current tab in navbar for web
            li.current a {
    
                color: #1e73be;
            }
    
            li a {
                color: black;
                border: 3px;
                font-weight: bold;
                border-radius: 5em;
                margin-top: 0;
    
                &:hover {
                    color: #1e73be;
                }
            }
        }
    }

Answer 1

在 .navbar nav 上的 min-width 媒体查询中，使用 justify-content: center; 而不是 space-between，以便 ul 居中。然后设置另一个媒体查询指示相同的 width 但 max-width 然后将其更改回 justify-content: space-between; 以定位您的徽标。

由于您使用的是 SCSS，我添加了一个 fiddle。

有没有办法让 LI 在我的导航栏中居中？

Is there a way for me to center the LI in my navigation bar?

html

css

sass

navbar

flexbox