¿Cómo alinear verticalmente texto en tipo de entrada = "texto"?

Question

Hay <input type="text" /> Necesito establecer la alineación vertical del texto ingresado. Por ejemplo, medio o arriba. http://jsfiddle.net/eSPMr/

Answer 1

Utilice relleno para simularlo, ya que vertical-align no funciona en las entradas de texto.

jsFiddle example

CSS

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

Answer 2

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

ésta es la manera correcta para ajustar la posición vertical de media.

Answer 3

Una alternativa es utilizar line-height: http://jsfiddle.net/DjT37/

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

Esto tiende a ser más consistentes cuando se desea una altura específica que no es necesario para calcular el relleno sobre la base de la fuente-tamaño y la altura deseada, etc.

Answer 4

Póngalo en una etiqueta div parece ser la única manera de forzar a que:

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

Puede ser ot sus etiquetas como span funcionan como div do.

Answer 5

Encontré esta pregunta mientras buscaba una solución a mi propio problema. Las respuestas anteriores se basan en el relleno para hacer que el texto aparezca en la parte superior o inferior de la entrada o utilice una combinación de altura y altura de línea para alinear el texto al centro vertical.

Aquí hay una solución alternativa para hacer que el texto aparezca en el medio utilizando un div y un posicionamiento. Consulte el 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>