1

也许是重复的，但我没有发现有类似问题的问题。

好的，我必须创建一个100%垂直和水平居中文本的高度输入字段。问题是，如果我将line-height-widthwindow设置为光标在 Chrome 中的大小相同。

任何想法如何在没有的情况下使文本居中line-height？

input {
    position: absolute;
    top: 0;
    left 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 0;
    outline: 0
}

只需设置line-height：

$('input').css({
    lineHeight: $(window).height() + 'px'
});

http://fiddle.jshell.net/G9uVw/

更新

这个问题似乎需要改变。问题是oldIE不会使文本居中，但所有其他浏览器都会。所以新的问题是，我们如何检查浏览器是否支持这个auto-center- feature?! (Since we know thatua`-sniffing 是邪恶的，我不想检查特定的浏览器......）

更新2

这似乎是 webkit 中的一个错误：https ://code.google.com/p/chromium/issues/detail?id=47284

4

1 回答 1

0

试试这个，应该垂直对齐：

input {

    //// vertical align
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    ////

    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 0;
    outline: 0
}

不确定 height: 100% 是否会避免这项工作，如果不工作，请尝试不使用 height: 100% 。如果是这种情况，也许解决方案是每次使用 javascript/jquery 计算高度。

于 2014-07-01T13:25:44.830 回答