如何定位按鈕內的文本？

Question

我使用按鈕內的非典型圖像背景。我需要讓這個文本在按鈕內部顯示「高於」默認值（這是垂直居中）。我必須做什麼？

CSS：

.button { 
    width: 211px; 
    height: 66px; 

    font-family: Arial, Helvetica, sans-serif; 
    font-size: 18px; 
    text-transform: uppercase; 
    color: white; 

    background: url('../img/button.png') no-repeat; 
    border: none; 
    cursor: pointer; 
} 

HTML：

<input type="submit" class="button" value="Submit"/> 
(...) 
<button class="button">Get a quote</button> 

從瀏覽器屏幕：

正如你可以看到按鈕文本應該是有點偏高，那麼現在是

Answer 1

設置padding-bottom。

button{ 
     width: 300px; 
     height: 300px; 
     padding-bottom: 200px; 
} 

The demo.

Answer 2

確切的解決方案取決於哪些內容NT恰好被放置到該按鈕，但總體思路是：

• 使用<button>元素
• 廣場內塊元素（一個<div>會做得很好）
• 給塊元素底部填充，並把裏面的文字

See it in action。

或者，如果您不想放大按鈕，則可以給出塊元素position: relative和負值top。

See it in action。