テキストを縦中央に配置する方法
更新日：2015年8月27日
テキストを左右中央に配置するのはtext-alignプロパティで簡単に実装出来るのに、テキストを縦中央に配置するなると急に難易度が上がります。
少し調べてみるとvertical-alignプロパティを使えば簡単に実装出来そうじゃんっていう風に思うのですが、vertical-alignプロパティはインライン要素とtableの中でしか使うことの出来ないプロパティだということに注意が必要です。
しかしテキストを縦中央に配置したいが為にtableなんて使いたくないって人が多いのも事実。私もその1人です。
ではtableを使うことなく、テキストを縦中央に配置する方法をご紹介します。
HTMLは以下のように記述。
テキスト
CSSは以下のように記述します。
.table_vertical {
display: table;
}
.text_vertical {
display: table-cell;
vertical-align: middle;
height: 200px;
}
.text_verticalにはdisplay: table-cell;を指定。.text_verticalを囲っている.table_verticalに、display: table;を指定することでdivを使っているにも関わらず、tableと同じような使い方ができるようになっています。
つまり.table_verticalというtableの中に.text_verticalというセルが入っている状況です。
これでtableを使わずに、テキストを縦中央に配置することが出来ました。
display: table-cell;はdisplay: table;とセットで使うということを覚えておきましょう。
ここより以下は更に詳しく知りたい方の為の補足ですが、
display: table-cell;には下記の特徴があります。
- vertical-alignプロパティが使うことが出来るようになる
- display: table;とセットで使うこと
- marginが効かない
- paddingは効く
- floatを使わなくても横並びにすることが出来る（floatとの併用は出来ない）
- borderやpaddingを使ってもwidthの中に含まれて計算される為、カラム落ちすることがない
- IE7以下では使えない
いまいちまだ浸透していないようですが、floatを使わずにレイアウトが可能で、widthの面倒な計算も不要。テキストを縦中央に配置するが出来ると便利なことだらけ。
今後流行ってくる予感がします。
