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

<分区>

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

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>

来自浏览器的屏幕: enter image description here

如您所见，按钮中的文本应该比现在高一点

最佳答案

设置padding-bottom。

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

The demo.

关于html - 如何将文本定位在按钮内？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12533229/

上一篇：html - 两个并排 float 的 div，高度相同

下一篇：javascript - HTML5 预加载器视频(进度条填满速度快于视频以文件结尾)

相关文章：

html - 从右侧出现在 div 后面的按钮 - CSS

html - 使内联 svg 填满整个屏幕

javascript - 我需要一种更简单、更有效的方式来处理我的网站格式(使用 CSS 和 HTML 中的形状)

javascript - JQuery 数据表 - 使用 javascript 条件语句返回 html

javascript - :hover css box-shadow display error on jQuery animate

javascript - 自定义事件和postMessage的区别

html - 报告 HTML + CSS + 打印 - Chrome 错误

php - 如何在 woocommerce 的购物车页面更改邮政编码的占位符文本

html - 容器高度为 100% 的可变大小 LI 元素中的垂直对齐文本

javascript - 在单选按钮上更改 jquery 中按钮的颜色