I can't center <textarea>-CodePudding

I try to center my <textarea> elements in my pet project but I can't find a way to do that. I have tried using the following approaches:

Changing my textarea in CSS:

textarea {
  display: flex;
  justify-content: center;
  align-items: center;
}

Using the text-align property:

<div style="text-align: center"><textarea>I am <textarea></textarea></div>

Using also <center> tag. Surprisingly, it worked. But I don't like this solution because it is condemned to use.

Down here is link of the picture from my project (I can't post one due I don't have enough reputation). Here you can see I have two blocks: textarea provided by Django framework and standard HTML textarea. Both of them are not centered. (https://i.imgur.com/1AzKrWJ.png)

Here is my code:

<p>Write the reason(s) for refusal:</p>
{% render_field form.refusal_reason placeholder="Text..." %}
<div style="text-align: center"><textarea>I am <textarea></textarea></div>

I have been finding for a solution for a long time but haven't succeed. I will be happy for any useful answer.

CodePudding user response：

You want:

margin-left: auto;
margin-right: auto;

Add that to your the css for that textarea.

Also - <center> isnt condemned - it was deprecated in HTML 4.0.1 and removed in HTML 5.

Most browsers probably still support it, which is likely why it worked, but you can’t count on it, because eventually it’ll be the same as using a tag called <fyuhsgh> without defining it first.

CodePudding user response：

You may add margin property, like the below or you can copy paste the following.

textarea {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}