height が決まっている領域で上下左右中央揃えにする CSS

概要

height が決まっている領域で上下左右中央揃えにするレイアウトのための CSS のコードです。position で実現する方法と違い、height が可変しても常に上下は縦横揃えが維持されます。

この方法はコンテンツエリアをウィンドウに対して上下中央揃えにしたいときにも応用ができます。

height が一定である必要がない場合や、IE で JavaScript の機能が利用できない環境を考慮する場合は、position を使って実現する方法や、expression を使用せずに、上下中央揃えを実現ができる、CSS で簡単に上下中央揃えを実現するの方法をおすすめします。

説明

Firefox, Safari, Opera などに対しては display プロパティの値に table-cell を用いることで、上下左右中央揃えを実現します。

height が一定のエリア内で上下左右中央揃え demo の場合は以下のような CSS のコードで実現しています。

div.sample {
	border:1px solid red;
	display:table-cell;
	height:500px;
	width:500px;
	vertical-align:middle;
}

div.sample-inner{
	background:#ccc;
	width:300px;
	margin:0 auto;
}

div.sample を table-cell としているので、その子要素に対しては vertical-align が有効になるので上下の中央揃えを、また、div.sample-inner の左右の margin は auto にすることで左右の中央揃えを実現します。

例えば、下記のような XHTML のソースコードの断片に対して、この CSS を適用すれば、div.sample-inner を上下左右中央揃えすることができます。

<div id="sample">
<div id="sample-inner">
上下縦横そろえになるコンテンツ。この box の高さが可変した時にも対応します。
</div>
</div>

ただし、IE 6 や IE 7 とそれ以前のバージョンの IE は display プロパティで table 関連の値をサポートしていないので、別の方法を併用して実現します。

IE 7 以下用のコードについて

IE 7 以前のバージョンでも height が決まっている領域で上下左右中央揃えを有効にするためには inline-block の性質を利用し実現します。そのためにはXHTML また CSS に IE 専用のコードを追加する必要があります。

inline-block は行の高さに対して vertical-align が有効です。IE 6, 7 は、inline-block と line-height の相性が悪いようなので、line-height を使わず、内包される inline-block の高さで、行の高さを決めます。例えばIE 6, 7 では、

<div style="vertical-align:middle;">
<span style="display:inline-block;height:300px;">文字列</span>
<span style="display:inline-block;height:100px;">文字列</span>
</div>

のような場合、div 要素に内包されている span 要素のうち一番 height が大きいものは 300 px なので、行間が 300 px の上下中央揃えとなります。

つまり、300 px の高さの div 要素のなかで上下中央揃えをしたいときには 300 px の基準となる、空の要素を入れておけば実現することができます。

<div style="vertical-align:middle;">
<span style="display:inline-block;height:300px;"></span>
<span style="display:inline-block;">300pxの高さ内で中央揃えにしたい要素</span>
</div>

この方法を利用して、IE でも上下左右中央揃えを実現できました。

height が一定のエリア内で上下左右中央揃えの demo

この例のように、マークアップに不要な要素を追加しなくてはいけませんが、IE の独自拡張である expression を使い、マークアップに不要な要素を追加せずに自動で特定の要素の中に appendChild する方法もあります。(結果的に DOM には追加されます。)

height が一定のエリア内で上下左右中央揃えの demo (expressionを使用したバージョン)

以下のコードを追加することで、class 属性が heightBase の div 要素を自身に自動で appendChild することができます。

 behavior: expression(
this.currentStyle.getAttribute("display")=="block" && (
heightBase = document.createElement('div'),
heightBase.className = 'heightBase',
this.appendChild(heightBase),
this.style.behavior = "none"
)
);

expression は IE の独自拡張であり、IE が JavaScript を利用できない状態では expression も動作しませんのでご注意ください。

トラックバックURI

http://www.yomotsu.net/lab/css/centermiddle/trackback

この記事へのコメントはまだありません

コメントフォーム

実験室に戻る

このページの目次