如何將導航項與頁面中心對齊-有解無憂

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

html {
    font-size: 10px;
}

.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

nav {
    position: absolute;
    margin: auto;

    .nav-container {
        padding-right: 2rem;
        padding-left: 2rem;
        padding-bottom: 2rem;
        margin-top: 2rem;
        margin-right: auto;
        margin-left: auto;

        .nav-list {
            list-style-type: none;

            .nav-item {
                display: inline-block;
                padding-left: 2rem;
                padding-right: 2rem;
                font-size: 1.2rem;

                .nav-link {
                    text-decoration: none;
                    color: #fbfdff;
                }
            }
        }
    }
}

header {
    background-color: #313131;
    height: 50rem;
}

<nav>
  <div class="nav-container">
      <ul class="nav-list">
          <li class="nav-item"><a href="#" class="nav-link">HOME</a></li>
          <li class="nav-item"><a href="#" class="nav-link">ABOUT ME</a></li>
          <li class="nav-item"><a href="#" class="nav-link">PROJECTS</a></li>
          <li class="nav-item"><a href="#" class="nav-link">CONTACT</a></li>
      </ul>
  </div>
</nav>

如何將導航項與導航容器的中心對齊？導航欄應該有透明背景，所以我想添加位置：絕對；導航元素的樣式。此外，所有 nav-item 都應該并排出現。這就是為什么我添加了 display: inline-block; 他們的風格。

uj5u.com熱心網友回復：

將的寬度設定nav為全寬，然后使用text-align: center。

nav {
    width: 100%;
    text-align: center;
}

uj5u.com熱心網友回復：

有很多方法可以做到這一點，但我更喜歡在“導航串列”中使用 flexbox 或 css 網格。這是使用 felxbox 的示例：

.nav-list {
          display:flex;
          justify-content:center;
          align-items: center; (if want to align vertically as well)
          list-style-type: none;
}

它將解決您的問題，復制粘貼并享受。

uj5u.com熱心網友回復：

只需在 css 中添加它，它就會在中心


.nav-list{
  display: grid;
  justify-content: center;
}

uj5u.com熱心網友回復：

您的樣式不是正確的 css 語法。

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

html {
    font-size: 10px;
}

.clearfix::after {
    display: block;
    clear: both;
    content: "";
}


    .nav-container {
        padding-right: 2rem;
        padding-left: 2rem;
        padding-bottom: 2rem;
        margin-top: 2rem;
        margin-right: auto;
        margin-left: auto;
}
        .nav-list {
            list-style-type: none;
}
            .nav-item {
                display: inline-block;
                padding-left: 2rem;
                padding-right: 2rem;
                font-size: 1.2rem;
}
                .nav-link {
                    text-decoration: none;

                }
            
header {
    background-color: #313131;
    height: 50rem;
}

<nav>
  <div class="nav-container">
      <ul class="nav-list">
          <li class="nav-item"><a href="#" class="nav-link">HOME</a></li>
          <li class="nav-item"><a href="#" class="nav-link">ABOUT ME</a></li>
          <li class="nav-item"><a href="#" class="nav-link">PROJECTS</a></li>
          <li class="nav-item"><a href="#" class="nav-link">CONTACT</a></li>
      </ul>
  </div>
</nav>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/381202.html

標籤：html css

上一篇：Bootstrap-當螢屏尺寸較小時洗掉數字的填充或邊距

下一篇：如何消除頁腳和頁面內容之間的差距