ansaurus

Question

Answer 1

+2 A:

Set text-align of the element's parent to center, like this:

HTML:

<div>
    <textarea></textarea>
<div>

CSS:

div { text-align: center; }

Here is an example: http://jsfiddle.net/ujzLt/

Dave 2010-08-26 22:34:51

Thank you for your quick reply! I have already assigned some colors and other things to the div element though, how do I get one which only has text-align:center;?

Chris 2010-08-26 22:40:39

@Chris -- just add `text-align:center;` to your current `<div>`'s css declaration then. :-)

Sean Vieira 2010-08-26 22:47:04

You can add all styling to the same div (color, font-family, text-align,...) or isn't this what you mean?

Dave 2010-08-26 22:50:32

I actually wanted to remove the styles from the div so they wouldn't apply to the textarea, but perhaps that isn't needed (thought it would form a box with background color and padding, like my div does)?

Chris 2010-08-26 23:29:17

They do not apply to the textarea, you can leave them as they are.

Dave 2010-08-26 23:32:42

Answer 2

+1 A:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>#container {width:100%; text-align:center;}</style>
</head>

<body>
<div id="container">
<textarea name="mytextarea" cols="10" rows="10"></textarea>
</div>
</body>
</html>

you wrap your textarea with a div, give it width and then you align it with text-align:center;

Sotiris 2010-08-26 22:36:35

Thanks a lot :-)! However, like I explained above, I have already made my div prettier, how do I get back to a default one with just the text align?

Chris 2010-08-26 22:40:59

Answer 3

+1 A:

add display: block; to your textarea styles

Jeff Adams 2010-08-26 22:42:29

Hey that did the trick, combined with the styles I already had, like you said. Thanks!

Chris 2010-08-26 22:46:34

No problem, sometimes it's the simple things that work best.

Jeff Adams 2010-08-26 22:47:52

Answer 4

+2 A:

The margins won't affect the textarea because it is not a block level element, but you can make it display block if you like:

textarea{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

before and after

By default, textareas are display: inline, which is why you can put them side-by-side easily, and why the text-align: center answers work too.

Douglas 2010-08-26 22:44:44

This is what I'm using now, do you know if there's anything bad about it (as it sounds too easy to be true/good ;-) )?

Chris 2010-08-26 22:48:07

Nope, I don't know of any downsides.

Douglas 2010-08-26 22:50:21

ansaurus

tags:

views:

answers:

How to center a textarea using CSS?

related questions