...

View Full Version : centering a textarea element with css?



gilf
02-18-2005, 05:10 PM
Hi all, I know how to center text & images but none of these things work with the textarea element. Does anyone know a good (standards complient) method that would center a textarea with css. Thnx in advance.

EDIT: using the margin: auto + block trick didn't work & setting left & right to 50% with position: absolute doesn't really center the element but shifts it slightly to the right of the center (on firefox at least, didn't test it with IE yet).

Bobo
02-18-2005, 05:16 PM
<textarea style="text-align:center"></..>
for text inside the box;

<center>textarea</center>
for the box intself to it's container

gilf
02-18-2005, 05:20 PM
yeah but isn't the <center> element deprecated? I am using XHTML 1.1 Strict so that would be an issue.

whizard
02-18-2005, 07:19 PM
Specify in CSS

textarea.my_centered_box
{
margin: 0 auto;
}

the margin prop goes in this order: top, right, bottom, left, but "0 auto" is a shortcut for top 0px, right auto, bottom 0px, left auto. Since left and right are both auto, the browser divides it equally, resulting in a centered element, and a happy coder. (Except in IE, where the coder is still mad about other things that DIDN'T work)

Dan

rmedek
02-18-2005, 07:52 PM
using the margin: auto + block trick didn't work & setting left & right to 50% with position: absolute doesn't really center the element but shifts it slightly to the right of the center (on firefox at least, didn't test it with IE yet).
What Whizard said. :)

If you want to use the 50% trick, remember that it won't be set to the center of the page, but the start of the element will be set to the center of the page. So you have to shift it back by half of the width of the element. So...


textarea {
width: 300px;
position: absolute;
left: 50%;
margin-left: -150px;
}

And that's how that works. Some browsers kinda freak out on this one, though. Use whatever you're comfortable with.

gilf
02-18-2005, 08:35 PM
K, thnx all. Gonna check if this is gonna work :).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum