footerについて

Question

progateのHTML/CSSの上級編を現在進めているのですが、その途中で気になる点があったので質問させていただきました。

メディアクエリの章でのことです。

footerの中身を中央寄せにする際、「text-align」が使用されていることです。

footerは調べたらブロック要素であるとわかりました。

ブロック要素の場合「margin:0 auto」を使うのが適切では？と疑問に思っているところです。

お答えいただけたら幸いです。
よろしくお願いします????‍♂️

Answer 1

margin:0 auto はブロック全体を中央寄せします。ブロックの width を設定していないと無意味です。
text-alignはブロック内のテキスト(インライン要素)をブロック内でどの位置に表示するかを指定します。

下記でtext-alignを left center right と変えて試してみるとよくわかると思います。

footer {
  text-align: center;
  width: 500px;
  margin:0 auto;
  background-color: lightgray;
}

CSS Text Module Level 3

Comments

[heku_777]

お答えいただきありがとうございます。
中身のinline要素の位置をその範囲で指定している、という事を実際に試して理解できました。
大変分かりやすい説明ありがとうございました。

Answer 2

ソースコード、実装したいデザインが掲示されていないので、なんとも言えませんが、
要件によっては適切としか言いようがありません。
基本は、質問者さんがおっしゃる通り、なのですが、
例えば、display: inline-block;のCSSを使い、要素を横並びにしている場合などは、
text-align: 値;が有効となります。

つまりは、要件によっては（実装したいデザイン、など）、そちらの方が、適切・有効だったりします。

Comments

[heku_777]

お答えいただきありがとうございます。
実装したいデザインやソースコードを掲示していなかったのにも関わらず、
しっかりと教えていただき勉強になりました。