Middle (vertically) align text inside a <textarea>

Question

It\'s a multiline search-box, so i want everything aligned in the middle. Is it possible?

Answer 1

You can fake it with vertical padding.

textarea {
    padding: 30px 0;
}

Generally you could use the line-height property, but you can not with more than one line of text.

Answer 2

Back in the days when i was asking this, i tried achieving this with textarea which is really not possible without scripting. The answer was adding HTML5's contenteditable="true" on a table cell with style="vertical-align: middle". If one's project allows modern HTML, this is a rather simple and effective solution.

If instead of adding <table> and <tr> and <td> to your markup, you would like something regular like a <div>, you would still need two of them:

<div style="display: table">
  <div 
    style="display: table-cell; vertical-align: middle"
    contenteditable="true">
    I am vertically aligned
  </div>
</div>

Answer 3

There is the HTML5 contenteditable attribute. http://www.w3schools.com/tags/att_global_contenteditable.asp

Maybe the div tag instead of textarea can solve your problem.

Answer 4

You might be able to make a script that determines the elements height, line height, and lines of text and calculate a padding-top, or even \n to prepend the text.

I do not think this is possible with just CSS though.