在網頁設計中，導航菜單是非常重要的。而其中一個基本需求就是要讓導航菜單居中，這是一個比較簡單的操作。 要讓導航菜單居中，可以使用 CSS 中的 text-align 屬性。先看一下 HTML 代碼：

<div class="nav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</div>

上面的代碼中，我們創建了一個 class 為 nav 的 div 容器，里面包含了一個無序列表，列表中有4個導航鏈接。 下面是使用 text-align 實現導航菜單居中的 CSS 代碼：

.nav {
text-align: center; /* 確保導航菜單居中 */
}
.nav ul {
list-style: none;
display: inline-block; /* 讓導航和容器在同一行 */
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
margin-right: 20px; /* 間距20像素 */
}
.nav li:last-child {
margin-right: 0; /* 取消最后一個導航的間距 */
}
.nav a {
display: block;
padding: 10px; /* 為每個導航鏈接設置間距 */
color: #333;
text-decoration: none;
font-size: 16px;
}

上述代碼中，我們將容器的 text-align 屬性設置為 center，表示要讓里面的內容居中。然后，我們將列表項 li 和導航鏈接 a 設置為 inline-block，讓它們在同一行顯示。我們還為每個導航鏈接設置了 padding，這樣就能夠讓它們之間產生一定的間距。 通過這些簡單的 CSS 代碼，我們就可以讓導航菜單很好地居中了。當然，具體的布局方式和樣式可以根據實際需要進行調整。