导航栏中的居中徽标？

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

.logo {
   background: grey;
   color: white;
   padding: 10px;
}

<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="/">
             <div class="logo">LOGO</div>
          </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);
}

.logo {
   background: grey;
   color: white;
   padding: 10px;
}

<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="/">
             <div class="logo">LOGO</div>
          </a>
        </li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
</nav>

导航栏中的居中徽标？

Centered Logo in Navigation Bar?

html

css

navigation

center