Html 如何在按钮内定位文本？

How to position the text inside a button?

提问by kspacja

I use an untypical image background inside a button. I need to make this text appear "higher" inside the button than the default (which is vertically centered). What I have to do?

我在按钮内使用了非典型的图像背景。我需要使此文本在按钮内显示为比默认值（垂直居中）“更高”。我必须做什么？

CSS:

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:

HTML：

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

Screen from browser:

从浏览器屏幕：

As you can see texts in buttons should be little bit higher then it is now

正如你所看到的，按钮中的文本应该比现在高一点

回答by xdazz

Set the padding-bottom.

设置padding-bottom.

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

The demo.

演示。

回答by Jon

The exact solution depends on what content exactly is placed into the button, but the general idea is:

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

• Use a <button>element
• Place a block element inside (a <div>will do fine)
• Give the block element bottom padding and put your text inside it

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

See it in action.

看到它在行动。

Alternatively, if you do not want to enlarge the button you could give the block element position: relativeand a negative top.

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

See it in action.

看到它在行动。