导航栏中的居中徽标？

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);
}

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>

Answer 2

如果链接的大小不完全相同，则接受的答案会中断（在现实世界中不太可能，显然可以设置固定宽度但很繁琐）

如果两侧的链接数量相同，则此方法有效（只要两侧有足够的空间让链接具有均匀的宽度）

ul, li {
  list-style-type: none;
}

.navi-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.navi-list li:not(.centered-logo) {
  flex: 1 0 auto;
  text-align: center;
}

<nav class="navi">
    <ul class="navi-list">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li class="centered-logo">
          <a href="/">
              <img src="//placehold.it/100x30" alt="CENTERED LOGO">
          </a>
        </li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
    </ul>
</nav>

如果是奇数，您可以在 DOM 中或使用 :before / :after 添加空的不可见元素（我知道但它有效），具体取决于需要多少额外元素。不幸的是，这个解决方案并不完美，所以任何建议的改进都会很棒。 像这样：

ul, li {
  list-style-type: none;
}

.navi-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.navi-list li:not(.centered-logo) {
  flex: 1 0 auto;
  text-align: center;
}

.navi-list:before {
  content: "0";
  opacity: 0.1;
  display: block;
  flex: 1 0 auto;

  
  /*  dev view  */
  height: 20px;
  background: rgba(0,0,0,0.1);
}

<nav class="navi">
    <ul class="navi-list">
<!--         <li style="opacity:0.1;">empty</li> -->
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li class="centered-logo">
          <a href="/">
              <img src="//placehold.it/100x30" alt="CENTERED LOGO">
          </a>
        </li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
</nav>