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

我无法在输入按钮的中心获取文本。我阅读了一些建议增加行高的文章，但这没有帮助。我尝试过三种不同的方法。垂直居中文本输入按钮或带图像的按钮

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/

编辑：下面 意见认为文本垂直居中。它看起来并不如此，因为图像阴影。我不能改变图像背景，它是由设计师creted，必须使用它。

添加填充底部帮助。

来源

2013-07-14 renathy

的文本完全集中在所有3个例子。背景图像是你的问题，它太小了。 – slash197

看我的[DEMO]（http://jsfiddle.net/M7nv6/9/） – 2013-07-14 10:41:59

您可以测试此：

.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-14 10:42:41 Farshid

文字是垂直居中然而你的图像有阴影，你的按钮（在图像中）的高度实际上小于29px。（？25像素）

变线，高度较小，对齐文本顶部

来源

2013-07-14 10:40:29

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

也许最好是用css替换完整的图像。你可以得到几乎相同的结果，大约相同数量的代码，节省一些（本例中为1）http请求。

来源

2013-07-14 10:43:42

由于您使用的是背景图片，所以您可以使用填充来对齐它。但我不会使用背景图片，而是使用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; 
}

来源

2013-07-14 10:50:58 Vector

你应该使用的填充，底部为考虑。但这里是你不能使用高度或宽度的填充点。每一件事情都没有高度，没事！

.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-14 10:53:54 bita

这是个好主意，它拯救了我的生命... –

你也可以移动的背景，因此它适合你的文字：

.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-14 11:13:55 Marteens

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

回答

相关问题