繁体   English   中英

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

[英]Flexbox is not perfecly centereing my NAV

提示:本站为国内最大中英文翻译问答网站,提供中英文对照查看,鼠标放在中文字句上可显示英文原文

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

如图所示,在使用 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 居中,但没有正常工作

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

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

只需将其更改为:

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

它应该工作。

问题未解决?试试搜索: Flexbox 没有完全集中我的资产净值
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2023 STACKOOM.COM