在HTML中,<button>
標簽用于創建可點擊的按鈕,但是在設置按鈕文字時,可能會遇到文字與按鈕不居中的問題,本文將介紹如何使用CSS讓按鈕文字垂直居中。
其實,讓按鈕文字垂直居中的方式也很簡單,可以使用CSS中的line-height
屬性,將按鈕的line-height
屬性值設置為按鈕的高度,即可實現垂直居中。
button { height: 50px; line-height: 50px; }
在CSS中,如果不指定line-height
屬性值,其默認值為normal
,此時,按鈕文字可能會與按鈕不居中,因此,我們需要顯式地設置line-height
屬性值。
除此之外,還可以使用display: flex;
和align-items: center;
屬性,將按鈕內的文字居中,代碼如下:
button { display: flex; align-items: center; }
這種方式也很簡單,只需將按鈕的display
屬性設置為flex
,再將align-items
屬性設置為center
,即可實現垂直居中。
綜上所述,可以使用line-height
或display: flex;
和align-items: center;
兩種方式將HTML按鈕的文字垂直居中,根據具體情況選擇適合自己的方式即可。