我可以使用 flexbox 将徽标放置在导航栏的中心吗？

Question

我正在尝试使徽标居中，使其始终位于导航栏的中心，无论有多少导航链接。

如果两侧的项目都是偶数，这对我来说就很容易了，例如左侧的 2 个链接和右侧的 2 个链接，但我试图让左侧的 3 个和右侧的 2 个链接居中的徽标。

是否可以使用 flexbox 属性使图像居中，或者我必须以不同的方式进行处理，例如涉及绝对/相对定位？

header.main-header {
  background: url("../images/slides/slide-1.jpg") no-repeat 75%/cover;
  height: 100vh;
}

nav.nav-bar {
  background-color: tomato;
}

ul.container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0;
}

ul.container li {
  list-style-type: none;
}

li.logo img {
  max-width: 125px;
}

<header class="main-header">
  <nav class="nav-bar">
    <ul class="container">
      <li>My Story</li>
      <li>Wines</li>
      <li>How to Order</li>
      <li class="logo"><img src="http://placeimg.com/640/480/any" alt="Wines"></li>
      <li>Personal Sommelier</li>
      <li>Contact</li>
    </ul>
  </nav>
  <p style="text-align: center;">|<br>(Center)</p>
</header>

提前谢谢你。 祝你有美好的一天。 :)

Answer 1

一个想法是使用徽标作为背景并居中，然后依靠一些边距来调整菜单元素：

header.main-header {
  height: 100vh;
}

nav.nav-bar {
  background-color: tomato;
}

ul.container {
  display: flex;
  align-items: center;
  padding: 0;
  background:url(http://placeimg.com/640/480/any) center/contain no-repeat;
  min-height:100px;
}

ul.container li {
  list-style-type: none;
  margin:0 2%;
}
ul.container li:nth-child(3) {
  margin-right:auto;
}

<header class="main-header">
  <nav class="nav-bar">
    <ul class="container">
      <li>My Story</li>
      <li>Wines</li>
      <li>How to Order</li>
      <li>Personal Sommelier</li>
      <li>Contact</li>
    </ul>
  </nav>
  <p style="text-align: center;">|<br>(Center)</p>
</header>

但如果您可以调整 HTML，您可以简单地将菜单分成两部分：

header.main-header {
  height: 100vh;
}

nav.nav-bar {
  background-color: tomato;
  display:flex;
  align-items:center;
}

ul.container {
  display: flex;
  align-items: center;
  justify-content:space-around;
  flex:1;
  padding: 0;
}
img {
  max-width:100px;
}
ul.container li {
  list-style-type: none;
  margin:0 2%;
}

<header class="main-header">
  <nav class="nav-bar">
    <ul class="container">
      <li>My Story</li>
      <li>Wines</li>
      <li>How to Order</li>
    </ul>
     <img src="http://placeimg.com/640/480/any" >
    <ul class="container">
      <li>Personal Sommelier</li>
      <li>Contact</li>
    </ul>
  </nav>
  <p style="text-align: center;">|<br>(Center)</p>
</header>