There is <input type="text" />
I need to set vertical alignment of the entered text. For example middle or top.
http://jsfiddle.net/eSPMr/
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>
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.
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
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.
The <textarea>
element automatically aligns text at the top of a textbox, if you don't want to use CSS to force it.
input[type=text]
{
height: 15px;
line-height: 15px;
}
this is correct way to set vertical-middle position.
Source: Stackoverflow.com