スタイルシートのみで上下中央配置
実装方法は3通り
以下のような事例を想定します。 白いテキストボックスが上下中央配置されています。
上下中央配置といえば、display:table-cellであったり、line-heightでの実装であったり、JavaScriptを用いたりと、何パターンが実装方法が存在しますが、IE7に対応していなかったり、改行に対応できなかったりと一長一短です。
そこで今回は、CSSのみで、なおかつIE7から対応できる方法を紹介します。
inline-blockの縦位置中央揃えを利用する
【注意】親要素の高さが決まっている場合のみ対応可能です
inline-blockを複数並べた際、vertical-alignで縦方向の位置を調整できることを利用します。
つまり、inline-blockの中に、親要素の高さと同じものを混ぜて、縦中央配置にすればよいのです。 具体的なソースは次のとおり。
<div class="wrapper"> <span class="ghost-center"></span> <p> Lorem ipsum ... </p> </div>
上記のソースにおいてp要素を、div要素の上下中央に配置します。
ポイントは空のspan要素を用意して全体の高さを取得させることと、子要素(span要素とp要素)をinline-blockにすることです。
display:inlineとzoom:1を併用すればIE7より対応可能です。
下図のようなイメージです。
実際はghost-centerの幅は0pxです。
.wrapper{ display: block; width: 300px; height: 300px; background: #ccc; text-align: center; } .wrapper .ghost-center, .wrapper p{ display: inline-block; vertical-align: middle; /display: inline; /zoom: 1; } .wrapper .ghost-center { width: 0px; height: 100%; }
絶対配置を利用する
【注意】親要素の幅・高さ / 子要素の幅・高さが決まっている場合のみ対応可能です
あまり知られていませんが、絶対配置にした要素の上下左右すべての座標を0を指定すると親要素いっぱいに広がるという性質があります。
これを利用して、子要素の幅・高さを決め打ちし、marginを成り行きにすることで中央に配置することが可能になります。
具体的なソースは次のとおり。
<div class="wrapper"> <p> Lorem ipsum ... </p> </div>
.wrapper{ position: relative; } .wrapper p{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 150px; height: 100px; margin: auto; }
ポイントは先述したとおり、幅/高さを決め打ちする点と、marginをautoにする点です。
ちなみに任意の方向のmarginを0にすれば右寄せ・左寄せ・上寄せ・下寄せも実装可能です。
相対配置とtransformを利用する
これはCSS3に対応している場合限定ですが、親要素や子要素のサイズが可変でも対応できる方法です。
<div class="wrapper"> <p> Lorem ipsum ... </p> </div>
.wrapper{ } .wrapper p{ position: relative; top: 50%; transform: translateY(-50%); }
絶対配置にした子要素に、子要素自身の半分の高さのマイナスマージンを指定する方法と似ています。