html - 导航栏中的居中 Logo ？

Question

任何人都可以指导我创建一个导航栏的最佳方法，该导航栏的 Logo 居中并且每侧有 2 个链接，就像这样:

我读到过不同的方法，比如将一个 ul 分成 2 个，一个向左浮动，另一个向右浮动，然后将 Logo 居中，但我不确定该怎么做，而且我读得越多，就越感到困惑。 我希望它能够响应并比正常高度高，可能是屏幕高度的 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);
}

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>