css怎麼讓導覽列居中

有四種方法可以將CSS 中的導覽列置中：使用Flexbox（應用程式display: flex 和justify-content: center）、使用網格佈局（應用d​​isplay: grid 和justify-items: center） 、使用絕對定位（應用position: absolute、left 和right: 50% 以及transform: translate(-50%, 0)），或使用margin 自動居中（應用margin: 0 auto）。

如何使用CSS 將導覽列置中

##1. 使用Flexbox

Flexbox 是一個佈局模型，允許元素在主軸上排列成一行或一列。若要使用 Flexbox 將導覽列居中，請執行下列步驟：

在導覽列容器上套用
• display: flex;。
在
• justify-content 屬性上套用 center 值。

<code class="css">.nav-container {
  display: flex;
  justify-content: center;
}</code>

2. 使用網格佈局

網格佈局允許將元素排列成表格狀的網格。若要使用網格佈局將導覽列置中，請執行下列步驟：

在導覽列容器上套用
• display: grid;。
在
• justify-items 屬性上套用 center 值。

<code class="css">.nav-container {
  display: grid;
  justify-items: center;
}</code>

3. 使用絕對定位

絕對定位允許元素從其正常流中移除並相對於父容器定位。若要使用絕對定位將導覽列置中，請執行下列步驟：

在導覽列容器上套用
• position: absolute;。
在
• left 和 right 屬性上套用 50% 值。
在
• transform 屬性上套用 translate(-50%, 0);。

<code class="css">.nav-container {
  position: absolute;
  left: 50%;
  right: 50%;
  transform: translate(-50%, 0);
}</code>

4. 使用 margin 自動居中

margin 屬性允許在元素周圍新增空白空間。若要使用 margin 自動居中導覽列，請執行下列步驟：

在導覽列容器上套用
• margin: 0 auto;。

<code class="css">.nav-container {
  margin: 0 auto;
}</code>

以上是css怎麼讓導覽列居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！