最近我在使用CSS設計一個網站的菜單欄時，發現字體無法對齊的問題。我花了很長時間才找到解決方法。

.nav {
display: flex;
justify-content: center;
align-items: center;
}
.nav li {
margin-right: 20px;
font-size: 16px;
font-weight: bold;
}
.nav li:last-child {
margin-right: 0px;
}

最初我的CSS代碼是這樣的。在.menu元素中，我使用了Flexbox布局讓菜單水平居中，并使用align-items:center;使菜單垂直居中。這使得整個菜單看起來很不錯，但是菜單中的文字似乎始終無法垂直居中。

后來我發現問題出在CSS代碼中，我沒有使用line-height屬性。該屬性使文字位于包含它們的父元素的垂直中心。下面是我更新后的CSS代碼：

.nav li {
margin-right: 20px;
font-size: 16px;
font-weight: bold;
line-height: 40px;
}

現在我的菜單欄看起來像這樣：

文字現在完美居中了！如果你也遇到了同樣的問題，希望這篇文章能幫到你。