Line-height not precisely centers vertically with Chrome - html

Question

<div id="submitHolder">
<input type="submit" value="">
</div>
#submitHolder {
background-color: #FF0000;
line-height: 124px;
text-align: center;
}
input[type="submit"] {
background-image: url("http://icons.iconarchive.com/icons/hopstarter/button/256/Button-Next-icon.png");
background-position: 0 0;
background-repeat: no-repeat;
border: 0 none;
height: 44px;
width: 194px;
}
http://jsfiddle.net/BLPE7/4/
as you can see, it is precisely centered vertically with firefox, but not with chrome. How to solve it?

Answer 1

That problem seems to occur because your submit button has an empty value – looks like chrome messes something up with the line-height then. Once I give it a value, and if it’s even just a space character (and therefor still not visible), the problem disappears:
<input type="submit" value=" ">
http://jsfiddle.net/BLPE7/9/

Answer 2

You can also use padding. Check this out: http://jsfiddle.net/tDj2U/1/
#submitHolder {
background-color: #FF0000;
/*line-height: 124px;*/
padding: 40px 0;
text-align: center;
}
input[type="submit"] {
background-image: url("http://icons.iconarchive.com/icons/hopstarter/button/256/Button-Next-icon.png");
background-position: 0 0;
background-repeat: no-repeat;
border: 0 none;
height: 44px;
width: 194px;
}

Answer 3

Yes, there is such problem for chrome with big line-height values. I solve this problem in your case by adding position absolute/relative and margin centering:
#submitHolder {
background-color: #FF0000;
height: 124px;
text-align: center;
position: relative;
}
input[type="submit"] {
background-image: url("http://icons.iconarchive.com/icons/hopstarter/button/256/Button-Next-icon.png");
background-position: 0 0;
background-repeat: no-repeat;
border: 0 none;
height: 44px;
width: 194px;
position:absolute;
left: 50%;
top: 50%;
margin: -22px 0 0 -97px;
}

Answer 4

http://jsfiddle.net/BLPE7/11/
Add vertical-align:middle to your input control.