我正在尝试使用 flexbox 导航到中心。 [复制]

【问题标题】：I am trying to get the navigation to the center by the use of flexbox. [duplicate]我正在尝试使用 flexbox 导航到中心。 [复制]
【发布时间】：2018-08-27 06:06:52
【问题描述】：

正如您在图片上看到的那样，当我放置 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;
}`

【问题讨论】：

左边的标志*

标签： css flexbox css-grid

【解决方案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>

【讨论】：