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

tableを使わずdivで縦位置を指定（改訂）

tableを使わずdivで縦位置を指定でご紹介しましたが、もっと簡単に実装できる方法がありましたので、改めてご紹介します。

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

サンプル

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

tableを使わずdivで縦位置を指定（改訂）サンプル（別ウィンドウで表示）

コード

float解除用のclass="cl"についてはfloat解除を参照してください。

(X)HTML

<div class="cl">
	<div class="vertical vertical_middle">
	<p>vertical-align: middle;<br />中央に配置</p>
	</div>
</div>

<div class="cl">
	<div class="vertical vertical_bottom">
		<p>vertical-align: bottom;<br />下部に配置</p>
	</div>
</div>

CSS

div.vertical {
	display: table-cell;
	width: 300px;
	height: 200px;
	background: #E3F2DA;
	border: 1px solid #000;
}
* html div.vertical  {
	display: inline;
	zoom: 1;
}
*+html div.vertical  {
	display: inline;
	zoom: 1;
}
div.vertical_middle {
	vertical-align: middle;
}
div.vertical_bottom {
	vertical-align: bottom;
}

table-cellを指定すると、次の要素が右側に回りこんでしまうので、float解除と同じように回り込みの解除を忘れずに。（上記サンプルのclass="cl"の部分です）