今天我們來講一下如何將css按鈕添加的文字居中顯示。當我們在進行網頁設計時，通常會用到各種各樣的按鈕，而按鈕上的文字顯示位置也是比較重要的一環。下面我們就來一步步學習如何實現按鈕文字居中顯示。 首先，我們需要先添加一個按鈕樣式的css代碼，如下所示：

.btn {
display: inline-block;
background-color: #6aa84f;
color: #fff;
padding: 10px;
border-radius: 5px;
text-align: center;
font-size: 14px;
cursor: pointer;
}

這是一個普通的按鈕樣式，其中text-align屬性為居中對齊。但是如果我們在按鈕上添加了文字，就會發現文字并沒有居中對齊，如下所示：

點擊這里這是一個按鈕示例

這是因為我們只對按鈕整體進行了居中對齊，并沒有對按鈕內的文字進行處理。接下來，我們需要對按鈕文字進行居中對齊。

.btn {
display: inline-block;
background-color: #6aa84f;
color: #fff;
padding: 10px;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
}
.btn span {
display: inline-block;
line-height: 30px;
vertical-align: middle;
}

我們在按鈕內部添加了一個span元素，通過設置display為inline-block，讓它能夠和按鈕整體并排顯示。同時，通過設置line-height和vertical-align屬性將按鈕內的文字居中對齊。 現在，我們可以將按鈕示例代碼進行修改，代碼如下所示：

點擊這里這是一個按鈕示例

這樣，我們就可以實現按鈕內文字的居中對齊了。當然，以上只是一種實現方式，方法不局限于此，希望大家可以多多嘗試，找到自己最喜歡的實現方式。