在CSS中,按鈕是網(wǎng)頁中經(jīng)常使用的組件。如何讓按鈕上文本居中顯示是一個大家都關(guān)心的問題。以下是幾種實現(xiàn)方式。
.btn{ display: inline-block; text-align: center; line-height: 40px; padding: 0 20px; }
這是最簡單的一種方法。我們設(shè)置按鈕為行內(nèi)塊級元素,然后通過文本居中和設(shè)置行高等屬性來實現(xiàn)按鈕文本的垂直居中。
.btn{ display: flex; justify-content: center; align-items: center; }
使用flexbox布局也可以輕松地實現(xiàn)按鈕文本的垂直居中。我們把按鈕的父元素設(shè)為flex布局,并使用justify-content和align-items屬性來居中按鈕文本。
.btn{ position: relative; } .btn span{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
使用絕對定位也可以實現(xiàn)按鈕文本的垂直居中。我們把按鈕設(shè)為相對定位,然后通過按鈕內(nèi)的span元素絕對定位,并使用transform屬性來居中文本。
總之,以上幾種方法都可以實現(xiàn)按鈕文本的居中顯示,根據(jù)具體情況選擇合適的方法即可。