textareaにmargin: 0 auto;を設定しても左右中央に寄らない問題の解決法

問題の画面

問題

赤枠で囲ってあるtextareaを左右中央に寄せようとしても寄らない。
textareaのクラスにmargin: 0 auto;を設定しても変わらない。

試したこと

1. marginが効かない？
   → margin: 10px 10px 10px 10px;は設定できたので、margin自体が効かないというわけではなさそう。

2. 親要素のwidthが設定されていないから？
   → 親要素にwidthが設定されていなくて、widthを指定したけどダメだった。

解決方法

textareaに

display: block;

を設定した。

原因

textareaはインライン要素なので、margin: 0 auto;が効かなかった。
margin: 0 auto;を効かせるにはブロック要素である必要があるため、display: block;でブロック要素に変換した。

変更後の画面