text-align:center;の書き方

Question

前提・実現したいこと

HTML＆CSSをprogateで勉強している初心者です。
text-align:center;に関して質問です。

以下にHTMLとCSSコードを書いています。
やりたいことは
heading クラスの<h2>と<h3>を中央揃えしたいです。
解答では.message-wrapperにtext-align:centerを使っています。

ここでの疑問点は
・texr-align:centerはブロック要素に適応されないから、クラスの設定は.heading h2,h3とすべきではないのか？
・また.heading h2,h3に対してtext-align:center;を書いても正解か？
・正解の場合なぜ、h2,h3ではなくmessage-wrapper全体にtext-alignを書いているのか教えて下さい。
宜しくお願いします。

発生している問題・エラーメッセージ

###   <div class="message-wrapper">
      <div class="container">
        <div class="heading">
          <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
          <h3>Let's learn to code, learn to be creative!</h3>
        </div>
        <span class="btn message">さっそく開発する</span>
      </div>
    </div>

以下CSS

.message-wrapper {
  border-bottom: 1px solid #eee;
  padding-bottom: 80px;
  text-align: center;
}

Answer 1

理由や意図はわかりませんが、
単純に、
.message-wrapper内の全ての要素をテキストを中央揃えにしたいから、
個々で効かせるよりは、親要素に効かせたほうが、記述量も少ないし、後の実装に都合がいいから、
じゃないでしょうか。

Comments

[loveapple2002]

ありがとうございます。
.heading h2,h3{text-align:center;}という記述も、正解ですか？

[miyabi_pudding]

正解です。
ただそうすると、
span.btn.messageは中央揃えになりません。
そして、h3は、その書き方だと、全てのh3に対して中央揃えが効いてしまいます。
.headingの中の物限定にするなら、
.heading h2,.heading h3 というセレクタにする必要があります。

[loveapple2002]

とれも理解できました！！！
ありがとうございます！！！