ブロック要素とインライン、インラインブロック要素の違いがよくわかりません。特に中央寄せの時。現在はProgateをやっています。

前提・実現したいこと

ブロック要素とインライン、インラインブロック要素の違いがよくわかりません。特に中央寄せの時。現在はProgateをやっています。違いを教えていただきたいです。コード自体はProgateの指示通りであり、このミッションもクリアしています。
ここに質問の内容を詳しく書いてください。

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

　現在はProgateでhtml、css を学習中です。Progateの指示でわからない場所がありました。以下のコードについてです。divコードはブロック要素のはずですが、Progateの指示ではtext-align:centerを使うように指示されています。又、実際に<div class="top-wrapper">にmargin:0 auto;を設定しても効きません。
中央寄せの際にtext-align:centerを使うのは、インライン要素、又はインラインブロック要素ではないのですか？

該当のソースコード

<heml>

<div class="top-wrapper">
      <div class="container">
        <h1>LEARN TO CODE.</h1>
        <h1>LEARN TO BE CREATIVE.</h1>
        <p>Progateはオンラインプログラミング学習サービスです。</p>
        <p>初心者にもやさしいスライドとレッスンで、Webサービスを作りながらプログラミングを学んでいきましょう。</p>
        <div class="btn-wrapper">
          <a href="#" class="btn signup">新規登録はこちら</a>
          <p>or sign up with</p>
          <a href="#" class="btn facebook">Facebookで登録</a>
          <a href="#" class="btn twitter">Twitterで登録</a>
        </div>
      </div>
    </div>

<css>

.container {
  width: 1170px;
  padding: 0 15px;
  margin: 0 auto;
}

.top-wrapper {
  padding: 180px 0 100px 0;
  background-image: url(https://prog-8.com/images/html/advanced/top.png);
  background-size: cover;
  color: white;
  /* text-alignをcenterに指定してください */
  text-align:center;
}
コード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。
実際に<div class="top-wrapper">にmargin:0 auto;を設定しても効きません。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

azuapricot

2019/12/12 11:29

（ブロック要素×　ブロックレベル要素〇）

行動規範の内容に同意します

回答1件

ベストアンサー

text-align:center を使うと、text-align:center を使った要素内のインライン要素とインラインブロック要素が中央揃えになります。
text-align:center によって中央揃えになるのはインライン要素とインラインブロック要素ですが、text-align:center を設定する要素は中央揃えにしたい要素の先祖なので、text-align:center を設定する要素がブロック要素であっても問題ありません。
（逆に、インライン要素に text-align:center を設定しても無意味です。）

投稿2019/12/12 11:42