How to vertically align text in input type text

Question

There is  lt input type  text    gt  I need to set vertical alignment of the entered text  For example middle or top  http   jsfiddle net eSPMr

User · Accepted Answer

Use padding to fake it since vertical-align doesn t work on text inputs   jsFiddle example  CSS   date-input            width  145px      padding-top  80px

User · Answer

I found this question while looking for a solution to my own problem  The previous answers rely on padding to make the text appear at the top or bottom of the input or use a combination of height and line-height to align the text to the vertical middle   Here is an alternative solution to making the text appear in the middle using a div and positioning  Check out the jsfiddle    lt style type  text css  gt      div           display  inline-block          height  300px          position  relative          width  500px             input           height  100           position  absolute          text-align  center     Optional            width  100          lt  style gt    lt div gt       lt input type  text  value  Hello world     gt   lt  div gt

User · Answer

The  lt textarea gt  element automatically aligns text at the top of a textbox  if you don t want to use CSS to force it

User · Answer

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

User · Answer

Put it in a div tag seems to be the only way to FORCE that    lt div style  vertical-align  middle  gt  lt div gt  lt input       gt  lt  div gt  lt  div gt    May be other tags like span works as like div do

User · Answer

input type text       height  15px      line-height  15px      this is correct way to set vertical-middle position

User · Answer

IF vertical align won t work use padding  padding-top  10px  it will shift the text to the bottom or          padding-bottom  10px  to shift the text in the text box to top  adjust the padding size till it suit the size you want  Thats the hack

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

Examples related to html

Examples related to css