Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to center a textarea using CSS?

Forgive me for asking such a simple question, I'm new to both HTML and CSS. Is there an easy way to center a textarea? I figured I'd just try using

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

but it (obviously?) didn't work.

like image 340
Chris Avatar asked Aug 26 '10 22:08

Chris


People also ask

How do I center textarea in CSS?

@Chris -- just add text-align:center; to your current <div> 's css declaration then. :-) You can add all styling to the same div (color, font-family, text-align,...) or isn't this what you mean?

How do I center a text area in a div?

You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.

How do I center align an item in CSS?

Center Align Elements To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.


1 Answers

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.

The textarea can also be centered by putting it inside a flexbox container like this:

<style>     div.justified {         display: flex;         justify-content: center;     } </style>  <div class="justified">     <textarea>Textarea</textarea> </div> 
like image 188
Douglas Avatar answered Oct 11 '22 15:10

Douglas