將文本置於按鈕的中央

Question

出於某種原因，我的文本不在我按鈕的垂直中心。

button { 
 
    height: 35px; 
 
    padding: 20px;

<button> 
 
Hi 
 
</button>

我需要保持填充和高度，因爲它是

Answer 1

試試這個增加高度和寬度按規定

button { 
 
    height: 50px; 
 
    width:60 
 

<button> 
 
Hi 
 
</button>

Answer 2

button { 
 
    height: 35px; 
 
    padding: 0 20px; 
 
}

<button> 
 
Hi 
 
</button>

Answer 3

然後取出頂部和底部填充

button { 
 
    height: 35px; 
 
    padding:0 20px; 
 
} 
 

<button> 
 
Hi 
 
</button>

Answer 4

button { 
 
    height: 35px; 
 
    padding: 20px; 
 
    line-height: 0px; 
 
    }

<button> 
 
Hi 
 
</button>

添加0像素的行高。

請參閱的jsfiddle： -

https://jsfiddle.net/

Answer 5

這是因爲您已設置的高度35px並填充到20像素周圍的所有按鈕。這實際上會使按鈕的高度爲40px。

所以解決方法是刪除頂部和底部填充，並將高度設置爲40px。

button { 
 
    height: 40px; 
 
    padding: 0 20px; 
 
}

<button> 
 
Hi 
 
</button>

另一種解決方案也可以是設置line-height爲0，但上述的解決辦法是更有意義，因爲按鈕其實是在高度爲40個像素，而不是30。