Question

我有一个标题，想要在其中插入徽标。除非没有其他选择，否则我不想使用引导程序。正如我所希望的那样，徽标似乎显示在导航栏的中央，但是，链接周围没有正确显示该徽标。这是我希望导航栏在定位方面的示例：ibb.co/zsGG9FY

#firstpage {
  width: 100%;
  height: 100%;
}

#firstpage ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
}

#firstpage li {
  float: left;
}

#firstpage li a {
  display: block;
  color: white;
  text-align: center;
  padding: 33px 19px;
  text-decoration: none;
  font-family: Futura;
  font-size: 11px;
}

#firstpage li a:hover {
  color: #00CFFF;
}

#firstpage .active {
  color: #00CFFF;
}

#firstpage .midlogo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#firstpage .midlogo img {
  width: 100%;
  height: 100%;
  background-color: white;

<section id="firstpage">
  <ul>
    <li><a class="active" href="#firstpage">HOME</a></li>
    <li><a href="#how-works">HOW IT WORKS</a></li>
    <li><a href="#why-us">WHY CHOOSE US</a></li>
    <li class="midlogo">
      <a href="#firstpage"><img src="logo.png"></a>
    </li>
    <li><a href="#gallery">GALLERY</a></li>
    <li><a href="#services">SERVICES</a></li>
    <li><a href="#contact">CONTACT US</a></li>
  </ul>
</section>

Answer 1

您已在float: left标签上设置了<li>，以使其保持在左侧位置。这应该删除。

并使用display: flex标签上的ul布局，您可以将所有项目居中对齐。

附带的代码段显示了您的需求。

#firstpage {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
}

#firstpage ul {
  display: flex;
  justify-content: center;
  align-items: center;
  
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
}

#firstpage li a {
  display: block;
  color: white;
  text-align: center;
  padding: 33px 19px;
  text-decoration: none;
  font-family: Futura;
  font-size: 11px;
}

#firstpage li a:hover {
  color: #00CFFF;
}

#firstpage .active {
  color: #00CFFF;
}

#firstpage .midlogo img {
  width: 100%;
  height: 100%;
  background-color: white;
}

<section id="firstpage">
  <ul>
    <li><a class="active" href="#firstpage">HOME</a></li>
    <li><a href="#how-works">HOW IT WORKS</a></li>
    <li><a href="#why-us">WHY CHOOSE US</a></li>
    <li class="midlogo">
      <a href="#firstpage"><img src="logo.png"></a>
    </li>
    <li><a href="#gallery">GALLERY</a></li>
    <li><a href="#services">SERVICES</a></li>
    <li><a href="#contact">CONTACT US</a></li>
  </ul>
</section>

Answer 2

我删除了分别包含float: left个项目的li和position: absolute个项目的.midlogo的类。

您需要做的就是在flex项内的ul属性中调整其一维布局。

#firstpage {
  width: 100%;
  height: 100%;
}

#firstpage ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;

  /************ ADD FLEX DISPLAY ************/
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
}


#firstpage li a {
  display: block;
  color: white;
  text-align: center;
  padding: 33px 19px;
  text-decoration: none;
  font-family: Futura;
  font-size: 11px;
}

#firstpage li a:hover {
  color: #00CFFF;
}

#firstpage .active {
  color: #00CFFF;
}


#firstpage .midlogo img {
  width: 100%;
  height: 100%;
  background-color: white;
}

<section id="firstpage">
  <ul>
    <li><a class="active" href="#firstpage">HOME</a></li>
    <li><a href="#how-works">HOW IT WORKS</a></li>
    <li><a href="#why-us">WHY CHOOSE US</a></li>
    <li class="midlogo">
      <a href="#firstpage"><img src="logo.png"></a>
    </li>
    <li><a href="#gallery">GALLERY</a></li>
    <li><a href="#services">SERVICES</a></li>
    <li><a href="#contact">CONTACT US</a></li>
  </ul>
</section>

您应该阅读有关flex属性-https://developer.mozilla.org/en-US/docs/Web/CSS/flex

Answer 3

我的解决方案使用Flexbox。我已将图像替换为带有虚线边框的元素，以便可以清楚地看到它在哪里。在每个链接后面也只有一个粉红色的背景，以表明它们的宽度确实相同。

每个普通链接的宽度为100％，以迫使它们占用所有可用空间。徽标具有flex-shrink:0，以便保留给定大小。

#firstpage ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
}

#firstpage li {
  width: 100%;
}
#firstpage li:nth-child(odd) {
  background: pink;
}

#firstpage li a {
  display: block;
  text-align: center;
  color: white;
  padding: 33px 19px;
  text-decoration: none;
  font-family: Futura;
  font-size: 11px;
}

#firstpage li a:hover {
  color: #00CFFF;
}

#firstpage .active {
  color: #00CFFF;
}

#firstpage .midlogo {
  border: white dashed 3px;
  width: 50px;
  flex-shrink: 0;
  height: 50px;
}

<section id="firstpage">
  <ul>
    <li><a class="active" href="#firstpage">HOME</a></li>
    <li><a href="#how-works">HOW IT WORKS</a></li>
    <li><a href="#why-us">WHY CHOOSE US</a></li>
    <li class="midlogo">
      <a href="#firstpage"></a>
    </li>
    <li><a href="#gallery">GALLERY</a></li>
    <li><a href="#services">SERVICES</a></li>
    <li><a href="#contact">CONTACT US</a></li>
  </ul>
</section>

导航栏中间的徽标，没有引导程序

3 个答案: