[CSS]ボックス内でテキストを垂直方向に中央揃えする方法

投稿日：2013年9月26日 | カテゴリー：Webデザイン

久しぶりの投稿となってしまいました。

お仕事が忙しすぎて更新が滞ってしまっていました。そのおかげ(?)もあり、更新を一時的に中断した場合にどのような傾向で検索順位が落ちてくるのかという貴重なデータも取ることができました。データをまとめたら、公開したいと思います。

さて、本日はdivなどのボックスタグ内のテキストを垂直方向で中央揃えする方法をご紹介します。

このようなHTMLがあったとします。

<div id="box">
    <p>垂直方向に中央揃え</p>
</div>

通常、ボックス内でテキストは上付きになります。デザイン的には中央揃えのニーズは高いと思います。

垂直方向で中央揃えにする場合は、スタイルシートを次のように書きます。

div#box {
    width: 100%;
    height: 100px;
}
div#box p {
    line-height: 100px;
}

さらに水平方向にも中央揃えにする場合は、1行加えるだけです。

div#box {
    width: 100%;
    height: 100px;
    text-align: center;
}
div#box p {
    line-height: 100px;
}

フッターのコピーライト表記などに利用できそうですね。
本日は以上です。