如何在輸入類型=「文本」中垂直對齊文本？

Question

有<input type="text" />我需要設置輸入文本的垂直對齊方式。例如中間或頂部。 http://jsfiddle.net/eSPMr/

Answer 1

由於vertical-align在文本輸入上不起作用，所以使用填充來僞造它。

jsFiddle example

CSS

.date-input {  
    width: 145px; 
    padding-top: 80px; 
}​ 

Answer 2

input[type=text] 
{ 
    height: 15px; 
    line-height: 15px; 
} 

這是設置垂直中間位置正確的方法。

Answer 3

另一種方法是使用line-height： http://jsfiddle.net/DjT37/

.bigbox{ 
    height:40px; 
    line-height:40px; 
    padding:0 5px; 
} 

這往往是比較一致的，當你想要一個特定的高度，你並不需要基於字體大小和所需的高度來計算填充，等

Answer 4

把它放在一個div標籤似乎是力量的唯一途徑：

<div style="vertical-align: middle"><div><input ... /></div></div> 

可能OT像span這樣的標籤就像div一樣。

Answer 5

我發現這個問題，同時尋找解決我自己的問題。以前的答案依靠填充使文本出現在輸入的頂部或底部，或者使用高度和行高的組合將文本與垂直中間對齊。

下面是使用div和定位使文本出現在中間的替代解決方案。檢查出jsfiddle。

<style type="text/css"> 
    div { 
     display: inline-block; 
     height: 300px; 
     position: relative; 
     width: 500px; 
    } 

    input { 
     height: 100%; 
     position: absolute; 
     text-align: center; /* Optional */ 
     width: 100%; 
    } 
</style> 

<div> 
    <input type="text" value="Hello world!" /> 
</div>