如何在按钮内定位文本？

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

确切的解决方案取决于按钮中的确切内容，但总体思路是：

• 使用<button>元素
• 将一个块元素放在里面（<div>会很好）
• 给块元素底部填充并将文本放在其中

See it in action

或者，如果您不想放大按钮，则可以给出块元素position: relative和否定top。

See it in action