こんにちは、ゆんつです。
CSSで画面中央に文字を配置するセンタリングをしたい場合。
text-align: centerを使うことが一般的だと思います。
でも時と場合によっては、text-align:centerではセンタリングできないケースもあります。
僕は最初の頃text-alignさえ使えばなんでもセンタリングが出来ると思っていたので、text-align: centerにしてもセンタリングが出来ないときには結構悩みました。
最近になってようやく思う通りに横位置のセンタリングができるようになったので、今日はtext-align:centerの原理と、text-align:centerではセンタリングできない場合に使われるmargin: 0 auto;の原理について書き残しておきます。
text-aligin: center
text-aliginというプロパティはブロック要素の中のインライン要素に効果を及ぼします。
ブロック要素は幅を明示的に指定しない限り、画面の左端から右端までが要素の幅になります。
ブロック要素に幅が指定されていない場合には画面の左端から右端までがブロック要素の幅になり、「text-aligin: center」によりそのブロック要素の中にあるインライン要素がブロック要素の中央に来るので、結果として画面の中央に文字がセンタリングされるのです。
決してブロック要素自体が画面の真ん中に移動しているわけではありません。
ブロック要素自体は動いてないよ
ですのでブロック要素に画面より狭い幅を指定した場合。
ブロック要素の幅内でのセンタリングとなるtext-align: centerでは画面の中央に配置することができなくなります。
このような場合はブロック要素自体を動かさなければならないので、text-align:centerに加えてmargin: 0 auto;を使うことになります。
margin: 0 auto;
marginプロパティは隣り合う要素との距離を調整する役割を持ちます。
幅が設定された要素の左右のmarginをautoにすると、その要素の左右のmarginは自動計算されて左右に均等に振り分けられます。
結果として要素自体が画面の真ん中に配置され、text-align:centerも設定されていればちょうど画面の中央にセンタリングされて見えるようになります。
text-align: centerはブロック要素自体を動かすものではなかったのに対し、margin: 0 auto;はブロック要素自体を動かして真ん中に配置することが大きな違いです。
まとめ
ポイントは
・text-aligin:centerはブロック要素の幅の範囲内でインライン要素をセンタリングする
・margin: 0 auto;は幅が設定された要素自体を画面の中央に移動させる
ですね
今はこの仕組みが分かったので簡単に左右方向のセンタリングができるようになりましたが、最初は仕組みを理解せずに「text-aligin:centerって書けばなんでも中央揃えになる！」と思い込んでいたので、text-aligin:centerで画面中央に揃わない時は頭が混乱することが良くありました。
原理さえわかってしまえば、なんてことはないですね。
本日は以上です
それでは、またですー。
コメント