Q&A
画像を添付しなおしました。
確かにブロック要素自体（div自体）は移動していませんね。
しかし、中身のテキストであるh2とh3は中央寄せになっていますね。
h１〜h６もブロック要素のはずですが、何故text-align centerで中央寄せになっているのでしょうか？
]
```
ここに言語を入力
Progateの指示に従って以下のようなコードを打ち込みました。
ここで疑問なのが、.message-wrapperの中のインライン要素であるspanにtext-align:center;が適用するのは理解できるのですが、何故ブロック要素であるdiv class="heading"にまで中央寄せが適応されるのでしょうか？回答よろしくお願いします。
<html> <div class="message-wrapper"> <div class="container"> <div class="heading"> <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2> <h3>Let's learn to code, learn to be creative!</h3> </div> <span class="btn message">さっそく開発する</span> </div> </div> <css> .message-wrapper{ border-bottom:1px solid #eee; padding-bottom:80px; text-align:center; }
回答3件
0
text-alignは継承します。
参考→ https://developer.mozilla.org/ja/docs/Web/CSS/text-align
つまり親要素（包含ブロック）にtext-alignを指定すると、子要素にtext-alignを指定した事と同じになります。
複数に指定したい場合には個々に指定するよりも合理的です。
デベロッパーツールで見てみるとInherited from...という形でtext-alignが子要素に継承されているのが確認できると思います。
追記：
以下のデベロッパーツールの画像を見てもらうと分かるのですが、要素自体は中央寄せになっていません。
中身のテキストが中央寄せになっているだけです。
displayの知識についてはサルワカの記事が分かりやすいので良ければ一読してみて下さい。
https://saruwakakun.com/html-css/basic/display
それと本題ではないのですが、ブロック要素でもmargin: atuo以外で中央寄せする方法はいくつかあります。（display: flex等）
投稿2019/12/15 07:35
編集2019/12/15 08:04
総合スコア360
0
ベストアンサー
###回答
何故ブロック要素であるdiv class="heading"にまで中央寄せが適応されるのでしょうか？
headingのブロック要素自体が中央寄せになっているのではなく、hedding要素の中の文字が中央寄せになっているんだ思います。
（heading要素に幅が設定されていないため、ブロック要素が中央寄せされているように見えるだけです。）
ブロック要素が幅を持っている時は、margin-autoでブロック要素自体が中央寄せになると思いますが．．．
以下簡単な例を載せます。
※線の色
黒：ブラウザの枠
青：headingブロック要素
赤、緑：各要素
###text-align: center;未設定
###.message-wrapperにtext-align: center;設定
###heading要素に幅を指定した時
この場合、ブロック要素内で文字がセンタリングされる。
ブロック要素自体はセンタリングされていません。
私なりの考え方はこんな感じです。
###追記
ブロック要素（h１〜h６）はtext-alignで中央寄せに出来ないという決まりが分からなくなってしまいました。
以下の画像にまとめてみました。
※h2,h3にwidthを指定しています。
以下が、｛margin 0 auto;｝を使ってh2,h3ブロック要素を中央寄せしたとき
※text-align:centerではこのようにならない！！
以上です。
投稿2019/12/15 08:20
編集2019/12/15 09:48
総合スコア640
headingにtext-align:centerを指定する
↓
その中のh2やh3タグにも継承される
↓
h2やh3内の文字がセンタリングされる
（h2やh3タグにtext-align:centerを設定するのと同じ）
以下が同じ意味だと思います。
headingブロック要素にcenterを設定➡内部のspan要素がセンタリングされる
（これは理解されていると思います）
h2ブロック要素にcenterを設定➡内部の文字がセンタリングされる
こんな感じでしょうか
わかりにくいですかね。
追記された画像についてですが、.message-wrapperにcenterを指定してもheadingブロック要素自体は中央寄せになってません。中央寄せになっているのはheading要素の内部のh2タグの内部の文字が中央寄せになってます。
なるほど、『h2ブロック要素にcenterを設定➡内部の文字がセンタリングされる』は可能なのですね。
そうなると、ブロック要素（h１〜h６）はtext-alignで中央寄せに出来ないという決まりが分からなくなってしまいました。
理解力がなくて申し訳ありません(^^;;
回答に追記しました。どうでしょうか？
h2,h3でそれぞれ一つの塊で、h２、h３自体は移動せず、中にある文章が中央に移動するということですね。
そうです！
なるほど！長々とご説明いただきありがとうございました????♂️
Progate頑張ってください！！
ありがとうございます！
0
.message-wrapperの中のインライン要素であるspanにtext-align:center;が適用するのは理解できるのですが、何故ブロック要素であるdiv class="heading"にまで中央寄せが適応されるのでしょうか？
いえ、正反対です。
text-alignは、ブロックコンテナーに対して適用して、その中身のテキスト（やフレージング・コンテンツ）の位置を決めるためのものです。
それ自体の固定的なボックスが取られない、display: inlineな要素に直接text-alignをかけても無意味です。
投稿2019/12/15 07:31
総合スコア145963
ブロック要素に対してtext-alignを適用することで、その中のインライン要素が中央寄せされるのはわかるのですが、何故中にあるブロック要素までが中央寄せされるのですか？
（勘違いでした）
ありがとうございました????♂️
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/15 07:41
2019/12/15 07:48
2019/12/15 11:41