Flexbox 没有完全集中我的资产净值

Question

在这里你可以看到它没有完全居中

如图所示，在使用 flexbox 时，我的导航不会正确地水平居中，我已经尝试了所有我知道的居中方法，但我似乎无法弄清楚。

有人可以帮我吗？ :D

        <header>
            <nav>
                <img class="Logo" src="images/Logo" alt="RPN Logo">
                <a class="nav_1" href="index.html">RPNorge</a>
                <a class="nav_2" href="regelverk.html">Regelverk</a>
                <a class="nav_3" href="spillerguide.html">Spillerguide</a>
                <a class="nav_4" href="whitelist.html">Søk Whitelist</a>
            </nav>
        </header>

nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

nav > a {
    text-decoration: none;
    color: #0F0326;
    text-transform: uppercase;
    font-size: 20px;
    align-self: flex-end;
    margin-bottom: 5px;
}

.Logo {
    width: 100%;
    max-width: 125px;
    height: auto;
    order: 3;
    margin-bottom: -70px;
    z-index: 1;
}

.nav_1,.nav_2,.nav_3,.nav_4 {
    cursor: pointer;
}

.nav_1 {
    order: 1;
    margin-right: 2rem;
}

.nav_2 {
    order: 2;
    margin-right: 1rem;
}

.nav_3 {
    order: 4;
    margin-left: 1rem;
}

.nav_4 {
    order: 5;
    margin-left: 2rem;
}

试图使 NAV 居中，但没有正常工作

Answer 1

你是说垂直居中？ 这是因为您将元素放在底部：

nav > a {
    ...
    align-self: flex-end;

只需将其更改为：

nav > a {
    ...
    align-self: center;

它应该工作。