text-align:cener;とmargin:auto;の使いかたについて、わかりません。divの中にこれらの２つをいれるりゆうはなんですか？

Question

前提・実現したいこと

htmlとcssを使って、ボタンの上にカーソルを乗せると、1.2×1.2の大きさに変化させる練習をしています。

<section>
      <h2 class="subTitle">Transitionの練習</h2>
      <div class="transition">ボタン</div>
    </section>
    <section>

cssは以下のように打ちました。
その時に、divのクラスにtext-align:center;を打つ理由が分かりません。
divはブロック要素なので、marginだけでいいはずなんですが、、、

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

エラーメッセージ

該当のソースコード

 .transition{
 width: 200px;
  line-height: 50px;
  border-radius: 5px;
  background: skyblue;
  color: #fff;
  text-align: center;
  margin: auto;
transition:300ms;
}``````ここに言語を入力
ここに言語を入力

コード

試したこと

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

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

Answer 1

text-align:center;はdivの中身のテキスト(インライン要素)の中央寄せです。

text-align:center;を削除すればテキストが左寄せになります。

Comments

[ki-mini]

返信ありがとうございます。

このコードを見た感じ、divの後ろにインライン要素がないのですが、そこのところはどう認識すればいいですか？

[hatena19]

divの中のテキスト「ボタン」が中央寄せになります。
正確にはインラインコンテンツの水平位置を設定するですね。

[ki-mini]

つまり、インライン要素のタグがなくても、インライン要素がある可能性あるということでしょうか？

[hatena19]

正確の用語は分かりませんが、
div要素(ブロックレベル要素)内のテキストもタグで囲ってなくてもインライン要素扱いになるということだと思います。
margin:auto; は設定してあるdiv要素自体をその親要素内で中央配置するもので、
text-align:center; は設定してあるdiv要素の中身のインライン要素を中央寄せするものですので、
影響を受ける対象が異なります。