html - 如何在按钮内定位文本？

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;
}

演示。

Answer 2

确切的解决方案取决于将什么内容准确地放入按钮中，但总体思路是：

• 使用一个<button>元素
• 在里面放置一个块元素（一个<div>就可以了）
• 给块元素底部填充并将文本放入其中

看到它在行动。

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

看到它在行动。