css - 如何使用CSS使2个导航重叠

Question

我有 2 个内联导航，其中一个漂浮在右侧: 2 navs

我想将第一个导航中的文本居中，但居中于屏幕中心而不是导航本身。我认为解决这个问题的最简单方法是让 2 个导航重叠，但我不确定。我想知道是否有人可以帮我解决这个问题？

header {
  font-size: 10px;
  letter-spacing: 1.025px;
  background-color: black;
  padding: 1em;
}

header>nav:nth-child(1) {
  float: right;
  background-color: red;
  padding: 1em 1em 1em 1em;
}

header nav {
  color: white;
  text-align: left;
}

header nav ul {
  list-style: none;
  display: inline-block;
  position: relative;
  padding: 0;
}

header nav ul li {
  display: inline;
  padding-left: 1em;
  padding-right: 1em;
}

<header>
  <nav>
    <a href="">MAGYAR</a> |
    <a href="">ENGLISH</a>
  </nav>
  <nav>
    <ul>
      <li><a href="index.html">RÓLAM</a></li>
      <li><a href="music.html">ZENE</a></li>
      <li><a href="design.html">GRAFIKA</a></li>
      <li><a href="gamedev.html">JÁTÉKFEJLESZTÉS</a></li>
    </ul>
  </nav>
</header>

Answer 1

您希望导航项在栏中居中，而忽略右侧导航元素的宽度？

一种方法是在红色导航上使用绝对定位，将其从页面流中移除。通过将其从流中移除，它的宽度/高度将被忽略，因此您可以基于整个屏幕将导航中的其余元素居中。

向红色导航添加一些定位，并确保将 header 设置为 position: relative。最后，将 text-align 更改为 center。

注意:通过从流程中移除红色导航，其他导航项可能会与红色导航重叠，具体取决于屏幕大小。使用媒体查询或其他一些解决方案进行必要的调整。

header {
  font-size: 10px;
  letter-spacing: 1.025px;
  background-color: black;
  padding: 1em;
  position: relative;
}

header>nav:nth-child(1) {
  position: absolute;
  top: 1em;
  right: 1em;
  bottom: 1em;
  background-color: red;
  padding: 1em 1em 1em 1em;
}

header nav {
  color: white;
  text-align: center;
}

header nav ul {
  list-style: none;
  display: inline-block;
  position: relative;
  padding: 0;
}

header nav ul li {
  display: inline;
  padding-left: 1em;
  padding-right: 1em;
}

<header>
  <nav>
    <a href="">MAGYAR</a> |
    <a href="">ENGLISH</a>
  </nav>
  <nav>
    <ul>
      <li><a href="index.html">RÓLAM</a></li>
      <li><a href="music.html">ZENE</a></li>
      <li><a href="design.html">GRAFIKA</a></li>
      <li><a href="gamedev.html">JÁTÉKFEJLESZTÉS</a></li>
    </ul>
  </nav>
</header>