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的一個bug：https://code.google.com/p/chromium/issues/detail?id=47284

來源

2013-06-18 yckart

我刪除了JavaScript lineheight，文本居中。我正在使用Chrome版本27.0.1453.110。 –

@RyanE是的，當然！將文本置於chrome中並不是問題。但在老年人，例如。我正在玩ff和歌劇。 – yckart

...也在Android上的鍍鉻 – Turnip

試試這個，應該垂直對齊：

如果

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％將避免第j ob，請不要使用高度：100％如果不起作用。如果是這樣的話，也許解決方法是每次用javascript/jquery計算高度。

來源

2014-07-01 13:25:44 agapitocandemor

100％高度輸入字段並垂直對齊文本

回答

相關問題