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

Question

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

如果两边的项目都是偶数，这对我来说就足够简单了，例如左边有 2 个链接，右边有 2 个链接，但我想在左边有 3 个链接，在右边有 2 个链接右侧带有居中徽标。

Is it possible to center the image using flexbox properties or would I have to go about it a different way, like involving absolute/relative positioning?

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>

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

Am I able to position a logo in the centre of a nav bar using flexbox?

html

css

header

nav

flexbox