當(dāng)我們?cè)谑褂?CSS 來設(shè)計(jì)按鈕時(shí)，可能會(huì)碰到一些按鈕文字無法居中的問題。這種問題通常會(huì)產(chǎn)生在按鈕寬度不夠?qū)挄r(shí)，文字無法居中對(duì)齊。

下面我們來看一下可能導(dǎo)致這種問題的一些原因。

button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
text-align: center;
border-radius: 3px;
border: none;
background-color: #007bff;
color: #fff;
}

上面的代碼是一個(gè)基本的按鈕樣式，但是如果我們給按鈕添加width屬性，就會(huì)發(fā)現(xiàn)文字無法居中對(duì)齊。例如：

button {
width: 100px;
}

此時(shí)，按鈕寬度只有 100px，但是文字卻沒有居中對(duì)齊。這是由于按鈕采用了display: inline-block屬性，在寬度不足時(shí)會(huì)自動(dòng)換行，導(dǎo)致文字無法居中。

解決這個(gè)問題的方法是給按鈕添加line-height屬性，并設(shè)置等于按鈕的 height 屬性。例如：

button {
width: 100px;
height: 40px;
line-height: 40px;
}

這樣就可以讓文字在按鈕中央居中對(duì)齊了。