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

1

7 Answers

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

jsFiddle example

CSS

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

An alternative is to use line-height: 

.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
input[type=text] { height: 15px; line-height: 15px; }

this is correct way to set vertical-middle position.

1

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

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

<div><div><input ... /></div></div>

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

1

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>

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