margin:auto;とtext-align:center;

web言語ロゴ

制作をこなしていけば次第に使い分けが出来、全く違うモノであると気づいていくモノですが、CSSをはじめた頃はmargin:auto;とtext-align:center;の使い分け方に迷う方が多いと思います。

そこで本日は私なりにこの2つの説明をさせていただきたいと思いますが、理論的というよりは感覚的な説明になりますので人によっては逆にわかりにくくなる可能性大です。

1.デモ

まずは下記ボタンよりデモ画面を開いておいてください。
※PCでの閲覧推奨

DEMO 1

2.ブロック要素とインライン要素

margin:auto;とtext-align:center;を使い分けて行くにはブロック要素とインライン要素の違いをまず理解していないといけません。

代表的なブロック要素といえばdivやp要素、インライン要素ではaやspan要素などがあります。
ブロック要素とインライン要素の特性はネット上で調べればたくさん出てくると思いますので、しっかり学びたい方は各自お調べください。

ではまず、デモ上部のデモ1という領域のブロック要素1とインライン要素1を見てください。

わかりやすいように背景色を入れてありますが、ブロック要素とは何も指定しなければ画面の端から端まで領域が広がるのに対して、インライン要素はテキスト分しか領域がありません。

  • デフォルトのブロック要素は画面の端から端まで領域を占める。
  • デフォルトのインライン要素は中に入っている物のまわりだけ。

厳密にいうとまた違ってくるのですが、とりあえずこの認識で2点を押さえておいてください。

3.margin:auto;とtext-align:center;

本題であるmargin:auto;とtext-align:centerの違いを記載していきます。

どちらも真ん中に何かを表示、あるいは移動させたい時に使うモノになりますが、具体的にどう違うのでしょう?

まずmargin:auto;はブロック要素にしか効きません。
そして「ブロック要素自体を中央に動かす」指定になります。

対してtext-align:center;はブロック要素の中の揃え位置を「中央揃え」にする指定になります。
要素自体の位置ではなく、要素の中の揃え位置を変えるというのがポイントです。

読んでわかったかもしれませんが、どちらも前提としてブロック要素にしか指定出来ないというコトを知っておいてください。

デモ画面のデモ2の領域を確認してください。

インライン要素2にはmargin:auto;を、インライン要素3にはtext-align:center;を指定してありますが、どちらも変化はありません。

なぜならブロック要素ではないからです。

では次にデモ3の領域を確認してください。

ブロック要素3の方から説明していきます。

text-align:center;はブロック要素の中の揃え位置を中央揃えにする指定なので、その通り効果が表れテキストが画面中央に移動しています。

対してmargin:auto;を指定したブロック要素2の方には変化がありません。

しかしこれは当たり前の結果です。

margin:auto;はブロック要素自体を中央に動かす命令ですが、要素が左端から右端まで広がっていたら真ん中に移動するということは出来ません。

例えば、横幅30cm縦幅5cmの箱に、横幅30cm縦幅5cmの羊羹(ようかん)がきっちり詰まっていたら、羊羹を箱の真ん中に寄せてくださいと言われても埋め尽くされているので寄せられません。

ではどういう状況であれば羊羹を箱の真ん中に寄せるコトが出来るでしょう。
単純に箱の横幅より羊羹の横幅小さければよいわけです。

これと同じでブロック要素にもブラウザの横幅あるいは親要素より小さいサイズを指定してあげればmargin:auto;は効くようになります。

デモ4を見てください。

ブロック要素4にはmargin:auto;とwidth:300px;を指定しました。
これでmargin:auto;の効かせ方がわかったと思います。

もうなんとなくわかってくると思いますが、デモ4のブロック要素4は要素自体は画面の中央に来ましたがテキスト部分は左揃えのままです。

繰り返しますがmargin:auto;はブロック要素自体を中央に動かす命令であって、要素の中の揃え位置を命令するモノではないからです。

ゆえにブロック要素4のテキストを中央揃えにしたければmargin:auto;とは別にtext-align:center;を指定しなければなりません。

指定したものがデモ5になります。

では最後にインライン要素の中央配置に関して触れて終わろうと思います。

インライン要素にはデモ2で説明したようにmargin:auto;やtext-align:centerを直接記述しても効果を表すコトが出来ません。

ではどうしたらよいかと言いますと、ブロック要素の中にインライン要素を入れ、親となるブロック要素にtext-align:centerを指定します。

それがデモ6になります。

ブロック要素6に背景色やテキストが入っているのでしっくりこないかもしれませんが、テキストを抜いて背景色の指定もしなければインライン要素のみで中央に配置している感じになると思います。

背景色などを抜いたモノがデモ7になります。

その他、インライン要素をdisplayによる指定でブロック要素に変えてmargin:auto;を効かすというようなやり方もありますが、基本的にインライン要素を中央に配置したい場合はブロック要素で囲んでそのブロック要素にtext-align:center;を指定するというのが王道の方法となります。

4.まとめ

  • ブロック要素とインライン要素の違いを理解する
  • margin:auto;とtext-align:center;はブロック要素に指定するモノ
  • margin:auto;は要素自体を中央へ移動(横幅の指定必須)
  • text-align:center;は要素の中の揃え位置を中央に指定
  • インライン要素を中央に配置にする場合はブロック要素で囲う

まとめると今回の話の要点はこのような感じです。

冒頭で述べたように数をこなしていけば嫌でもわかるようにはなっていきますが、はじめた頃はイマイチ使い分けがわからなかったりするものです。

この他にも配置に関するCSSというのはいくつかあり、1つの状況を作るにしても様々な方法が出てくるためその度に頭を悩ませるコトになるとは思いますが、margin:auto;とtext-align:center;に関してのこの話がどなたかの役に立ったら幸いです。

Categories: CSS