低価格、短納期、高品質なWebサイト制作|ScuderiaWeb

tableを使わずdivで縦位置を指定

tableのセルでは、vertical-alignを指定することで、縦方向の中心や下揃えで文字列や画像を配置することができますが、divタグの中では通常vertical-alignは適用されません。
画面中央に文字列を配置したい場合など、divでvertical-alignを指定する方法を紹介します。

サンプル

tableタグを使用せずに、中央・下部に文字列を配置したサンプルです。

中央に配置

下部に配置

コード（中央に配置）

(X)HTML

<div class="outer">
	<div class="vertical_middle">
		<p class="inner">テキスト</p>
	</div>
</div>

CSS

div.outer {
	display: table;			/* ① */
	height: 100px;
	width: 100%;			/* ② */
	background: #E3F2DA;
	color: #5C5C5C;
}
	* html div.outer {
		position: relative;	/* ③ */
	}
	*+html div.outer {
		position: relative;	/* ③ */
	}
div.vertical_middle {
	display: table-cell;	/* ④ */
	vertical-align: middle;	/* ⑤ */
}
	* html div.vertical_middle {
		position: absolute;	/* ⑥ */
		top: 50%;			/* ⑥ */
	}
	*+html div.vertical_middle {
		position: absolute;	/* ⑥ */
		top: 50%;			/* ⑥ */
	}
div.vertical_middle p.inner {
	margin: 0;
}
	* html div.vertical_middle p.inner {
		position: relative;	/* ⑦ */
		top: -50%;			/* ⑦ */
	}
	*+html div.vertical_middle p.inner {
		position: relative;	/* ⑦ */
		top: -50%;			/* ⑦ */
	}

ポイントはdisplay（FireFox・Safari等の場合）とposition（IEの場合）です。

display: table;でテーブルと同じように表示・・・①

display: table;はtableタグ以外のものをtableのように表示させるもので、IE7を除くモダンブラウザのみ対応しています。

横幅を指定・・・②

display: table;が適用されると、tableタグ同様、内部の要素によって横幅が変わります。
つまり、FireFoxやSafariでは文字の長さに応じて、横幅が短くなってしまうため、width: 100%;を指定して、ブロック要素と同じように表示させます。

IE用にpositionを指定・・・③

IEではdisplay: table;が適用されません。そこで、絶対位置配置を行うのですが、それ以前にposition: relative;が指定された要素がないと、画面の左上に配置されてしまうため、ここでposition: relative;を指定しておきます。

セルとして扱う・・・④

display: table;を指定したことで、outerはテーブルの外枠と同じ意味を持つようになったので、今度はtdにあたるdisplay: table-cell;を指定します。

縦位置を指定・・・⑤

display: table-cell;によってセルと同じ扱いができるようになったので、td同様vertical-alignが使用できるようになります。

IE用に絶対位置を指定・・・⑥

IEはdisplay: table;もdisplay: table-cell;も対応していないため、このままでは何も指定していないときと同じ状態です。
IEの場合は、絶対位置指定で表示位置を調整します。
position: absolute;によって絶対位置配置を有効にし、top: 50%;でdiv全体の高さの上から50%、つまり中心から配置します。

IE用に相対位置を調整・・・⑦

top: 50%;を指定したことで、divの高さの半分の位置から文字列を表示することができましたが、それだけでは中心に表示されるのではなくて、中心から下に表示されてしまいます。
そのため、文字列全体の高さの50%分を上にずらします。

コード（下部に配置）

(X)HTML

<div class="outer">
	<div class="vertical_bottom">
		<p class="inner">テキスト</p>
	</div>
</div>

CSS

div.outer {
	display: table;
	height: 100px;
	width: 100%;
	background: #E3F2DA;
	color: #5C5C5C;
}
	* html div.outer {
		position: relative;
	}
	*+html div.outer {
		position: relative;
	}
div.vertical_bottom {
	display: table-cell;
	vertical-align: bottom;
}
	* html div.vertical_bottom {
		position: absolute;
		top: 100%;
	}
	*+html div.vertical_bottom {
		position: absolute;
		top: 100%;
	}
div.vertical_bottom p.inner {
	margin: 0;
}
	* html div.vertical_bottom p.inner {
		position: relative;
		top: -100%;
	}
	*+html div.vertical_bottom p.inner {
		position: relative;
		top: -100%;
	}

考え方は中央に表示させる場合と同様です。
FireFoxやSafariの場合はtebleと同じように表示させ、vertical-align: bottom;を指定。
IEの場合は、絶対位置指定でdivの上から100%の位置から、更に文字列の高さ分だけ上にずらした位置に表示させます。