css

文字を画面中央へ表示する

文字を中央へ表示する方法はいくつか存在しますが、今回は、display: table と、display: table-cell を使い、文字を画面の中央に表示させます。
画面いっぱいに背景画像を表示し、その中央へ文字を表示させます。
こんな感じです。

全画面表示

背景画像を画面いっぱいに表示する方法は以下を参考にして下さい。

文字のセンタリング

文字を画面中央に表示します。

HTML

文字を中央に配置する為のクラスは outクラスcenterクラス になります。
out_imgクラスは画像を表示し、stringクラスは文字の大きさと色を調整しています。
out_imgクラス、stringクラスは今回意識しなくて良く、適宜好きなように変更して下さい。

CSS

色々書いてありますが、今回見るところは、outクラスcenterクラスです。
落ち着いて見てみましょう。
outクラスdisplay: tablecenterクラスdisplay: table-cellを指定しています。
display: tabledisplay: table-cellは要素を親子関係で使用します。
そして、display: table-cell はインライン要素になります。
インライン要素は、vertical-align: middle; により、縦のセンタリングが行えます。
また、text-align: center; は横のセンタリングになります。

まとめ

特にありません。

© DeNnie.Lab All Rights Reserved.