导航栏中的徽标是否居中？

Question

任何人都可以引导我找到创建带有居中徽标和每侧2个链接的导航栏的最佳方法，就像这样：

我已经读过不同的方法，例如将ul分成2个，向左浮动，然后向右浮动，然后将徽标居中放置，但是我不确定该怎么做，而且阅读的越多，我就越困惑。我希望它能够响应并使其比正常情况更高，也许是屏幕高度的15/20％。

有人可以帮我解决这个问题吗？

Answer 1

只需使用Flexbox。只需将div #logo替换为您的图片即可。

的HTML

<nav>
  <a href="">Home</a>
  <a href="">Artwork</a>
  <div id="logo"></div>
  <a href="">Responses</a>
  <a href="">Contact</a>
</nav>

的CSS

html, body{
  height: 100%;
}

body{
  margin: 0;
}

nav{
  display: flex;
  width: 100%;
  height: 20%;
  background: #eee;
  align-items: center;
  justify-content: center;
}

a{
  text-decoration: none;
  color: rgba(0,0,0,0.8);
  margin: 0 40px;
}

#logo{
  width: 200px;
  height: 100%;
  background: rgba(0,0,0,0.3);
}

<nav>
  <a href="">Home</a>
  <a href="">Artwork</a>
  <div id="logo"></div>
  <a href="">Responses</a>
  <a href="">Contact</a>
</nav>

html, body{
  height: 100%;
}

body{
  margin: 0;
}

nav{
  display: flex;
  width: 100%;
  height: 20%;
  background: #eee;
  align-items: center;
  justify-content: center;
}

a{
  text-decoration: none;
  color: rgba(0,0,0,0.8);
  margin: 0 40px;
}

#logo{
  width: 200px;
  height: 100%;
  background: rgba(0,0,0,0.3);
}