我正在尝试通过使用flexbox导航到中心。

Question

正如您在图片上看到的那样，当我将margin-left：auto和margin-right：auto放在一起时，徽标又是资金流占用了一些空间。我希望导航精确地位于中心。感谢您的帮助。

`header {
 grid-column: full-start/full-end;
 display: flex;
 background-color: var(--color-blue-dark);
 .logo {
    margin-left: 5rem;
    align-self: center;
    color: rgb(209, 197, 197);
    font-size: 2rem;
}
.nav {
    margin-left: auto;
    margin-right: auto;
    align-self: center;
}`

Answer 1

您可以将flexbox用于导航项目，并将徽标绝对定位。

* {
  box-sizing: border-box;
}

img {
  display: block;
}

.container {
  background-color: black;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.logo {
  position: absolute;
  top: 0;
  left: 0
}

.menu {
  display: flex;
}

<nav>
  <div class="container">
    <div class="logo"><img src="https://via.placeholder.com/150x50">
    </div>
    <div class="menu">
      <img src="https://via.placeholder.com/50x50/00ff00">
      <img src="https://via.placeholder.com/50x50/ff0000">
      <img src="https://via.placeholder.com/50x50/0000ff">
    </div>
  </div>
</nav>