How to vertically align text in input type="text"? [duplicate]

Question

There is <input type="text" /> I need to set vertical alignment of the entered text. For example middle or top. http://jsfiddle.net/eSPMr/

Answer 1

Use padding to fake it since vertical-align doesn't work on text inputs.

jsFiddle example

CSS

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

Answer 2

An alternative is to use line-height: http://jsfiddle.net/DjT37/

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

This tends to be more consistent when you want a specific height as you don't need to calculate padding based on font-size and desired height, etc.