【週刊ドットインストール】 256timesのクラスを準備中、Ruby/Ruby on Railsのロードマップページを追加
text-align:centerについて動作がよく理解できていないので質問します。 今まで何となくボックス内のテキストの水平位置を移動させるものだと思って使用してました。
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が指定されています。
header
h1
p
a
img
h1、p要素にはテキストが中央揃えになり、a、img要素は要素自身が中央揃えになっています。
まずインライン要素a, imgについてですが、インライン要素の横幅はコンテンツの幅になると思うので a,imgが一つの塊になって親要素headerに対して中央揃えになるのでしょうか。 (block要素の幅は指定しなければ親要素の幅なのでheaderの幅はbodyの幅になる)
対して、h1、pは共にblock要素で横幅は指定がなければ親要素いっぱいになるかと思います。 inline要素のように親要素に対して要素自身が中央揃えになるのなら何も変化がないかと思いますがここでは中のテキストが中央揃えになっています。
text-alignとは、対象がblock要素ならテキストの中央揃えになり、inline要素ならば要素自身が親要素に対して中央揃えになるのでしょうか。
text-align
的外れな質問かも知れませんがご教授いただければと思います。
ドットインストールは、3分動画でマスターできるプログラミング学習サービスです。
3分で気軽に学習でき、スマートフォンからも視聴可能です。ホームページやWebサービスの制作を通して、実践的にプログラミングを学べます。
他にも、ゲーム制作やデータ分析・機械学習・AIに使われる言語まで幅広くカバー。学びたい分野のレッスンがきっと見つかります。
この回答を見るにはプレミアムプランへの登録が必要です
text-align:centerについて動作がよく理解できていないので質問します。今まで何となくボックス内のテキストの水平位置を移動させるものだと思って使用してました。
本学習内容のHTMLでは
となっています。
いま、
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要素ならば要素自身が親要素に対して中央揃えになるのでしょうか。的外れな質問かも知れませんがご教授いただければと思います。