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要素)
a
、img
要素(inline要素)
が囲われていて、header
にtext-align:center
が指定されています。
h1
、p
要素にはテキストが中央揃えになり、a
、img
要素は要素自身が中央揃えになっています。
まずインライン要素a
, img
についてですが、インライン要素の横幅はコンテンツの幅になると思うので
a
,img
が一つの塊になって親要素header
に対して中央揃えになるのでしょうか。
(block要素の幅は指定しなければ親要素の幅なのでheaderの幅はbodyの幅になる)
対して、h1
、p
は共にblock要素で横幅は指定がなければ親要素いっぱいになるかと思います。
inline要素のように親要素に対して要素自身が中央揃えになるのなら何も変化がないかと思いますがここでは中のテキストが中央揃えになっています。
text-align
とは、対象がblock要素ならテキストの中央揃えになり、inline要素ならば要素自身が親要素に対して中央揃えになるのでしょうか。
的外れな質問かも知れませんがご教授いただければと思います。
この回答を見るにはプレミアムプランへの登録が必要です
プレミアムプランとは?