Javascript 垂直对齐标题元素盖茨比JS、SCSS

我有一个导航栏，是我在盖茨比用SCS制作的。出于某种原因，“Luke”元素和列表中的其他元素在垂直方向上稍有偏差。我不知道为什么，我试过垂直对齐，但没有成功。我用的是盖茨比，SCSS

header.js

return(
        <header className={headerStyles.header}>
            <h1 className={headerStyles.logo}>Luke</h1>
            <nav>
                <ul className={headerStyles.navList}>
                    <li>
                        <Link className={headerStyles.navItem} activeClassName={headerStyles.activeNavItem} to="/">Home</Link>
                    </li>
                    <li>
                        <Link className={headerStyles.navItem} activeClassName={headerStyles.activeNavItem} to="about">About</Link>
                    </li>
                    <li>
                        <Link className={headerStyles.navItem} activeClassName={headerStyles.activeNavItem} to="blog">Blog</Link>
                    </li>
                    <li>
                        <Link className={headerStyles.navItem} activeClassName={headerStyles.activeNavItem} to="contact">Contact</Link>
                    </li>
                </ul>
            </nav>
        </header>
    )

---

根据您提供的代码，它看起来已经垂直对齐了。是否有其他css影响页面

.header{
填充顶部：40px；
填充底部：50px；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
}
.导航列表{
证明内容：柔性端；
显示器：flex；
列表样式类型：无；
保证金：0；
}
.导航项目{
颜色：白色；
字体大小：.9rem；
保证金权利：1.3rem；
文字装饰：无；
}

卢克


家


关于


博客


接触

您能用后期处理的源代码更新您的问题吗？我们可以看到最终的HTML和CSS？

.header{
    padding-top: 40px;
    padding-bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-list{
    justify-content: flex-end;
    display: flex;
    list-style-type: none;
    margin: 0;
}

.nav-item{
    color: white;
    font-size: .9rem;
    margin-right: 1.3rem;
    text-decoration: none;
}