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;

它應該工作。