Html 输入按钮或带有图像的按钮中的垂直居中文本

我无法获取输入按钮中心的文本。我读过一些建议增加线条高度的文章，但这没有帮助。 我试过三种不同的方法

HTML:

JSFIddle：

编辑： 下面的注释建议文本垂直居中。因为图像阴影，看起来不是这样。我不能改变图像背景，它是由设计师认可的，必须使用它

---

添加底部填充有帮助。

文本垂直居中，但图像有阴影，并且图像中的按钮的高度比29px小

---

将线路高度更改为更小的25px？将文本与顶部对齐

文本垂直居中，但图像有阴影，图像中的按钮高度比29px小

将线路高度更改为更小的25px？并将文本与顶部对齐

您可以测试：

.button {
    background: url(http://tax.allfaces.lv/templates/tax/images/btn1.png) no-repeat;
    cursor: pointer;
    border: none;
    display: inline-block;
    line-height: 0px;
    text-align: center;
    width: 110px;
    height: 29px;
    color: white;
    padding: 0;
    padding-bottom: 7px;
    font-size: 14px;
    margin: 0;
}

您可以测试以下内容：

.button {
    background: url(http://tax.allfaces.lv/templates/tax/images/btn1.png) no-repeat;
    cursor: pointer;
    border: none;
    display: inline-block;
    line-height: 0px;
    text-align: center;
    width: 110px;
    height: 29px;
    color: white;
    padding: 0;
    padding-bottom: 7px;
    font-size: 14px;
    margin: 0;
}

---

由于您使用的是带阴影的背景图像，所以可以添加如下底部填充：padding:0 5px；适应你的需要

---

也许最好用css替换整个图像。您可以使用大约相同数量的代码获得几乎相同的结果，在本例中，可以保存一些http请求。

因为您使用的是带阴影的背景图像，所以可以添加如下底部填充：padding:0 5px；适应你的需要

---

也许最好用css替换整个图像。您可以使用大约相同数量的代码获得几乎相同的结果，在本例中，可以保存一些http请求。

当您使用背景图像时，也可以使用填充来对齐它。但我会考虑不使用背景图像，而是使用PUR CSS

演示

---

当您使用背景图像时，您也可以使用填充来对齐它。但我会考虑不使用背景图像，而是使用PUR CSS

演示

你们应该用垫底。但这里有一点，你不能使用高度或宽度的填充物，没有高度一切都好

.button {
    background: url(http://tax.allfaces.lv/templates/tax/images/btn1.png) no-repeat;
    cursor: pointer;
    border: none;
    display: inline-block;
    line-height: 29px;
    vertical-align: middle;
    text-align: center;
    width: 110px;
    color: white;
    padding: 0 0 8px;
    font-size: 14px;
    margin: 0;
}

你们应该用垫底。但这里有一点，你不能使用高度或宽度的填充物，没有高度一切都好

.button {
    background: url(http://tax.allfaces.lv/templates/tax/images/btn1.png) no-repeat;
    cursor: pointer;
    border: none;
    display: inline-block;
    line-height: 29px;
    vertical-align: middle;
    text-align: center;
    width: 110px;
    color: white;
    padding: 0 0 8px;
    font-size: 14px;
    margin: 0;
}

---

您还可以移动背景，使其适合您的文本：

.button {
background: url(http://tax.allfaces.lv/templates/tax/images/btn1.png) no-repeat 0px 4px;;
cursor: pointer;
border: none;
display: inline-block;
line-height: 29px;
vertical-align: middle;
text-align: center;
width: 110px;
height: 29px;
color: white;
padding: 0;
font-size: 14px;
margin: 0;
}

---

您还可以移动背景，使其适合您的文本：

.button {
background: url(http://tax.allfaces.lv/templates/tax/images/btn1.png) no-repeat 0px 4px;;
cursor: pointer;
border: none;
display: inline-block;
line-height: 29px;
vertical-align: middle;
text-align: center;
width: 110px;
height: 29px;
color: white;
padding: 0;
font-size: 14px;
margin: 0;
}

---

文本完全集中在所有3个示例上。背景图像是你的问题，它太小了。请看我的，文本完全集中在所有3个示例上。背景图像是您的问题，它太小。请参阅我的