-4

I want to center textarea element, but margin: 0 auto doesn't work properly.

Also I tried to wrap element in div which has margin: 0 auto style.

<div style="margin: 0 auto;">
    <textarea rows="4" cols"100"></textare>
</div>
Guga Nemsitsveridze
  • 721
  • 2
  • 7
  • 27
  • 1
    `` contains a typo and the margin auto only works for block level elements with a set width. – DBS Aug 30 '19 at 09:23
  • add `text-align: center` in div style – Sangita Kendre Aug 30 '19 at 09:23
  • thanks I just provide the question in purpose to simplify the job for other developers.. see the answer – Guga Nemsitsveridze Aug 30 '19 at 09:23
  • 1
    Adding useful self-answered questions is great, but ideally it should only be done on questions that haven't been covered already. See this, or any of the other thousand questions regarding centring: https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div?rq=1 – DBS Aug 30 '19 at 09:25

4 Answers4

6

You can do it with display: flex and justify-content: center;

<div style="display:flex; justify-content:center;">
    <textarea rows="4" cols"100"></textare>
</div>
TOMBA
  • 205
  • 1
  • 11
0

If you want to center in HTML you can go for:

<center>
    <h2>How Not to Center with HTML</h2>
</center>

This text may be centered... but you would be better off using CSS to center text or other elements on a web page. Like this:

HTML: 

<div class="center">
    <p>Some centered text</p>
</div>

CSS:

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}
41 72 6c
  • 1,600
  • 5
  • 19
  • 30
0

Set the div to display: table; This allows the div to take the width of the textarea instead of taking up width:100%;

This should fix it:

  <div style="margin: 0 auto; display:table;">
    <textarea rows="4" cols="100">
    </textarea>
    </div>

I also noticed that your question had a few typos and this will not render correct HTML. It should be 'textarea' not 'textare'. Please correct them too and it should be good to go.

Charlene Vas
  • 723
  • 1
  • 9
  • 21
Winston Jude
  • 569
  • 2
  • 11
-1

There is kinda tricky solution: You should enclose the element inside wrapper element, which have style="text-align: center" and the element style should be display: inline-block

<div style="text-align: center">
    <textarea rows="4" cols="100"></textarea>
</div>
Guga Nemsitsveridze
  • 721
  • 2
  • 7
  • 27