我是否可以使用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>