在網(wǎng)頁設(shè)計(jì)中，下劃線是一種常見的修飾樣式。使用 CSS 可以輕松地實(shí)現(xiàn)下劃線的添加，但是很多人在居中下劃線時(shí)遇到了困難。本文將介紹一些方法，幫助您實(shí)現(xiàn)下劃線的居中顯示。

.text {
text-align: center;
border-bottom: 1px solid #000;   
display: inline-block;
padding-bottom: 3px; 
}

代碼中的.text類被設(shè)置為內(nèi)聯(lián)塊級(jí)元素，并且添加了 1 像素的下邊框。然后，通過對(duì)元素設(shè)置邊框底部的內(nèi)邊距來設(shè)置下劃線距離容器底部的距離。最后，將文本對(duì)齊方式設(shè)置為居中。

使用以上代碼，您可以輕松地實(shí)現(xiàn)下劃線的居中顯示。但是如果您需要對(duì)下劃線的樣式進(jìn)行自定義，添加樣式即可：

.text {
text-align: center;
display: inline-block;
}
.text:after {
content: '';
display: block;
margin: 0 auto;
width: 50%;
height: 1px;
background-color: #000;
}

在這個(gè)例子中，我們使用偽元素 :after，并設(shè)置為塊級(jí)元素。我們將該元素居中，并設(shè)置其寬度為容器的 50%。然后，添加一個(gè) 1 像素高的背景色，以實(shí)現(xiàn)下劃線的效果。

總的來說，使用 CSS 來居中下劃線并不難。您只需要使用一些簡(jiǎn)單的代碼，便可實(shí)現(xiàn)下劃線的居中，樣式的定制及調(diào)整也非常容易。