How do I center text within a textbox for an HTML form?

Hi John2,

There are two kinds of textboxes in HTML, <input type="text"> and <textarea>

For the first one (<input type="text">) I don't think it is possible to change the alignment (not even CSS's direction: rtl seems to have any effect...)
but for the <textarea> it is quite simple with style="text-align: center"

You can change the height of a <textarea> to make it look like an <input type="text"> field :-)

Hi Jgivoni,

I actually found the answer myself also. I was able to center the textbox like this:

<input type="text" style="text-align:center">

It worked like a charm. Thanks for your input.

I realized that my first answer relied on a typing error, therefore I couldn't get it to work!
John is right, "text-align: center" is all that is needed. Sorry for my mistake.

thanks for d answer...it really helps :)

The simple solution:
text-align: center

This css property will center text within textboxes and textareas.
Examples:
<input type="text" style="text-align: center"/>
<textarea style="text-align: center"></textarea>

Click here to see the Answer Discussion that preceded this tutorial.

Login to rate this tutorial: Good  |  Bad