50

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

1

7 Answers 7

30

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

jsFiddle example

CSS

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

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.

3
  • 1
    In Chrome, changing the line-height in the Fiddle doesn't seem to have any effect. What am I missing?
    – rinogo
    Nov 30, 2018 at 18:58
  • The vertical alignment will depend on font height and input height, so, it can be adjusted using padding !!! Feb 9, 2019 at 14:53
  • No it can't. No matter what you do text is aligned in the middle vertically. So there is not way to align it at the top? May 6, 2021 at 23:13
11
input[type=text]
{
   height: 15px; 
   line-height: 15px;
}

this is correct way to set vertical-middle position.

2
  • Does not work as shown.
    – Harlin
    Sep 26, 2020 at 13:44
  • Doesn't work in textarea.
    – towry
    Jul 18, 2022 at 1:33
10

The <textarea> element automatically aligns text at the top of a textbox, if you don't want to use CSS to force it.

2

Put it in a div tag seems to be the only way to FORCE that:

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

May be other tags like span works as like div do.

1
  • 1
    Does not work as shown
    – Harlin
    Sep 26, 2020 at 13:44
2

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.

<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>
-1

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.