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/

正如您所看到的，它精确地与firefox垂直居中，但不是使用chrome。怎么解决？

Answer 1

这个问题似乎发生了，因为你的提交按钮有一个空值 - 看起来像铬混乱的线条高度然后。一旦我给它一个值，如果它只是一个空格字符（因此仍然不可见），问题就会消失：

<input type="submit" value=" ">

http://jsfiddle.net/BLPE7/9/

Answer 2

您也可以使用填充。看看这个：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

是的，对于具有较大line-height值的chrome存在此类问题。我通过adding位置绝对/相对和边距居中解决了这个问题：

#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

Esri Support

将vertical-align:middle添加到输入控件。

线高不能精确地与Chrome垂直居中

4 个答案: