1

我无法在输入按钮的中心获取文本。我阅读了建议添加行高的文章，但这无济于事。我已经用三种不同的方式进行了尝试。

HTML：

<button type="submit" class="button validate">Submit</button>
<input type="submit" class="button validate" value="Submit"></input>
<input type=" button " class="button validate " value="Submit"></input>

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;
    height: 29px;
    color: white;
    padding: 0;
    font-size: 14px;
    margin: 0;
}

JSFIddle：http: //jsfiddle.net/M7nv6/

编辑： 下面的评论建议文本垂直居中。它看起来不是这样，因为图像阴影。我无法更改图像背景，它是由设计师创建的，必须使用它。

添加 padding-bottom 有帮助。

4

6 回答 6

4

你应该使用padding-bottom它。但这里是你不能使用具有高度或宽度的填充的一点，没有高度一切都很好！

.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;
}
于 2013-07-14T10:53:54.033 回答
1

你可以测试一下：

.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;
}
于 2013-07-14T10:42:41.920 回答
0

文本垂直居中，但是您的图像有阴影，并且您的按钮（在图像中）的高度确实小于 29px。

将 line-height 更改为更小（25px？）并将文本对齐到顶部

于 2013-07-14T10:40:29.927 回答
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;
}
于 2013-07-14T11:13:55.693 回答
0

由于您使用的是带有阴影的背景图像，因此您可以像这样添加底部填充：（padding: 0 0 5px;根据您的需要进行调整）。

也许用css替换完整的图像会更好。您可以使用大约相同数量的代码获得几乎相同的结果，从而节省一些（在本例中为 1）http 请求。

于 2013-07-14T10:43:42.930 回答
0

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

演示http://jsfiddle.net/M7nv6/

.button {
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
    background-color: rgba(219, 87, 5, 1);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 9px 25px rgba(0, 0, 0, .7);
    -moz-box-shadow: 0px 9px 25px rgba(0, 0, 0, .7);
    box-shadow: 0px 9px 25px rgba(0, 0, 0, .7);
    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;
    border:none;
}
于 2013-07-14T10:50:58.340 回答