在網頁設計中，導航欄是非常重要的一部分，它不僅可以直接指引用戶訪問目標頁面，還能夠是網頁更美觀。但是，有些時候我們需要把導航的文字放在導航欄下方，如何實現呢？CSS可以輕松搞定這個問題。

在HTML中，我們可以通過ul和li標簽來創建一個導航欄：

<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">關于我們</a></li>
</ul>

接下來，我們需要設置CSS樣式來實現文字在導航下方顯示。首先，我們需要將li標簽設置成相對定位，這樣才能夠控制其子元素的絕對定位。

ul li {
position: relative;
display: inline-block;
}

然后，我們需要設置a標簽絕對定位，將其位置設置到li標簽底部居中。具體設置如下：

ul li a {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}

通過上述設置，我們就能夠實現將導航文字放在導航欄下方，居中顯示。如果需要調整文字的位置和樣式，可以對相應的CSS屬性進行修改。

最終的代碼如下：

<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">關于我們</a></li>
</ul>
ul li {
position: relative;
display: inline-block;
}
ul li a {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}

通過以上CSS代碼，我們可以很容易地將導航文字放在導航欄下方，達到更好的網頁設計效果。