[英]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;
它应该工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.