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

＆＃13;

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

＆＃13;

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

＆＃13;

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添加空的不可见元素（yuk，但它可以工作），具体取决于需要多少个额外元素。不幸的是，该解决方案不是完美的，因此任何建议的改进都会很棒。像这样：

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>

导航栏中的徽标？

2 个答案: