如何在输入类型=“文本”中垂直对齐文本？

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>