margin:auto;とtext-align:center;

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

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

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

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

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

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

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

厳密にいうとまた違ってくる(※1)のですが、とりあえずこの認識で2点を押さえておいてください。
(※1)ブロック要素は画面ではなく、囲まれている要素の端から端に広がることなど。

本題である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;を指定するというのが王道の方法となります。

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

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

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