我最近开始学习CSS和HTML并遇到以下问题:nav-links元素相对于剩余空间而不是整个导航栏居中
到目前为止,我已经设法按照我想要的方式仅通过添加一个不可见的元素来将其居中,但在我看来这是错误的,所以我希望得到更合理的建议。
/* Navigation Bar */
.navbar {
width: 75%;
height: 3.8rem;
background-color: hwb(0 15% 85% / 0.473);
border-radius: 40px;
margin: auto;
margin-top: 1rem;
display: flex;
align-items: center;
padding: 0 20px;
justify-content: space-between;
}
.logo h1 {
display: flex;
align-items: center;
color: aliceblue;
font-size: 20px;
}
.nav-links {
display: flex;
align-self: center;
gap: 20px;
margin: auto;
}
.nav-links a {
color: aliceblue;
text-decoration: none;
padding: 8px 16px;
transition: background-color 0.3s;
}
<header class="navbar">
<div class="logo">
<h1>TorFlicks</h1>
</div>
<nav class="nav-links">
<a href="#">Главная</a>
<a href="#">История</a>
<a href="#">⌕</a>
</nav>
</header>
<main>
