vertical centering text in input button or button with image - html

Question

I cannot get text in the center of input button. I read articles that suggests adding line-height, but this doesn't help.
I have tried it in three different ways.
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/
EDIT:
Comments below suggested that text is centered vertically. It doesn't look so, because of image shadow. I cannot change image background, it is creted by designer and have to use it.
Adding padding-bottom helped.

Answer 1

you should use padding-bottom for that. But here is the point you cant use paddings with height or width everything goes fine without height!
.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

You may test this:
.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

text IS centered vertically however your image have shadow and your button (in image) is really smaller in height than 29px.
change line-height to smaller (25px?) and align text to top

Answer 4

Since you're using background-image with shadow you could add a bottom padding like so: padding: 0 0 5px; (adjust to your needs).
Maybe it'd be better to replace the complete image with css. You can get almost the same result with about the same amount of code, saving some (in this case, 1) http requests.

Answer 5

As you are using a background image you may as well use padding to align it. BUT i would consider not using a background image and instead using 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

You could also move the background so it fits your text:
.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;
}