水平導(dǎo)航欄居中是網(wǎng)站布局中經(jīng)常用到的一個(gè)設(shè)計(jì)要素。使用 CSS 居中水平導(dǎo)航欄有很多種方法，下面介紹一種利用 margin 和 text-align 屬性的實(shí)現(xiàn)方式。 首先，需要將導(dǎo)航欄的寬度設(shè)置為固定值，并且讓它的 display 屬性值為 inline-block。這樣可以讓導(dǎo)航欄水平放置，并占據(jù)固定的空間。 接下來，設(shè)置導(dǎo)航欄的容器標(biāo)簽，一般為 div 標(biāo)簽，將其 text-align 屬性值設(shè)為 center，這樣導(dǎo)航欄就可以在容器中居中了。但這樣仍然不夠，導(dǎo)航欄可能會(huì)因?yàn)樽髠?cè)或右側(cè)有一些空白而產(chǎn)生偏移。解決方法是給導(dǎo)航欄設(shè)置 margin 為 auto，并且給其左右兩側(cè)填充一些空白，以保證導(dǎo)航欄在容器中水平居中。 下面是實(shí)現(xiàn)居中水平導(dǎo)航欄的 CSS 代碼：

.nav-container {
text-align: center;
}
.nav-list {
display: inline-block;
width: 600px; /* 設(shè)置導(dǎo)航欄寬度為 600px */
margin: 0 auto; /* 讓導(dǎo)航欄在容器中水平居中 */
}
.nav-item {
display: inline-block;
padding: 0 10px; /* 在導(dǎo)航項(xiàng)左右兩側(cè)填充 10 像素空白 */
line-height: 60px; /* 設(shè)置導(dǎo)航項(xiàng)高度為 60px */
font-size: 18px;
font-weight: bold;
color: #333;
text-decoration: none;
}
.nav-item:hover {
color: #f00;
}

代碼中，.nav-container 是導(dǎo)航欄的容器標(biāo)簽，.nav-list 是導(dǎo)航欄本身的標(biāo)簽，.nav-item 是導(dǎo)航欄中的每個(gè)項(xiàng)的標(biāo)簽。給 .nav-item 添加 :hover 狀態(tài)可以讓鼠標(biāo)懸停在導(dǎo)航項(xiàng)上時(shí)顏色變化。 這樣，一個(gè)居中水平的導(dǎo)航欄就完成了。