Question

我无法在输入按钮的中心获取文字。我阅读的文章建议添加行高，但这并没有帮助。我试过三种不同的方式。

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帮助。

Answer 1

你应该使用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;
}

Answer 2

您可以测试一下：

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

Answer 3

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

将行高改为较小（25px？）并将文本对齐到顶部

Answer 4

由于你正在使用带阴影的背景图像，你可以像这样添加一个底部填充：padding: 0 0 5px;（根据你的需要调整）。

用css替换完整的图像可能会更好。使用大约相同数量的代码可以获得几乎相同的结果，从而节省了一些（在这种情况下，1）http请求。

Answer 5

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

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

Answer 6

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

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

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

6 个答案: