text-align:center の動作がよくわかりません

2021年3月23日
ユーザー

text-align:centerについて動作がよく理解できていないので質問します。
今まで何となくボックス内のテキストの水平位置を移動させるものだと思って使用してました。

本学習内容のHTMLでは

  <header>
    <h1>すごいアプリ</h1>
    <p>ウルトラすごい最高なアプリです</p>
    <a href="" class="btn">ダウンロード</a>
    <img src="img/top.png">
  </header>

となっています。

いま、header(block要素)の中に
h1要素(block要素)
p要素(block要素)
aimg要素(inline要素)
が囲われていて、headertext-align:centerが指定されています。

h1p要素にはテキストが中央揃えになり、aimg要素は要素自身が中央揃えになっています。

まずインライン要素a, imgについてですが、インライン要素の横幅はコンテンツの幅になると思うので
a,imgが一つの塊になって親要素headerに対して中央揃えになるのでしょうか。
(block要素の幅は指定しなければ親要素の幅なのでheaderの幅はbodyの幅になる)

対して、h1pは共にblock要素で横幅は指定がなければ親要素いっぱいになるかと思います。
inline要素のように親要素に対して要素自身が中央揃えになるのなら何も変化がないかと思いますがここでは中のテキストが中央揃えになっています。

text-alignとは、対象がblock要素ならテキストの中央揃えになり、inline要素ならば要素自身が親要素に対して中央揃えになるのでしょうか。

的外れな質問かも知れませんがご教授いただければと思います。

この回答を見るにはプレミアムサービスへの登録が必要です

プレミアムサービスとは?