Question

也许是重复但我没有找到类似问题的问题。

好的，我要创建一个100%高度输入字段，使文本垂直和水平居中。问题是，如果我将line-height设置为window - 宽度，则光标会在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 that ua`-嗅探是邪恶的，我不想检查特定的浏览器...）

UPDATE2

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

Answer 1

试试这个，应垂直对齐：

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
}

不确定高度：100％是否会避免这项工作，如果没有高度则尝试：100％如果它不起作用。如果是这种情况，也许解决方案是每次使用javascript / jquery计算高度。

100％高度输入字段并垂直对齐文本

1 个答案: