ie7でも上下中央に表示

画像を上下中央に表示する方法

HTML/CSSコードサンプル

1	<div class="box">

2	<p class="image"><img src="image.png" alt="" width="200"heigh="200"><p>

3

</div>

view sourceprint?

01

.box {

02	display: table;

03

}

04	.box .image {

05	display: table-cell;

06	width: 400px;

07	height: 400px;

08	background: <a class="_hootified" a="" href="#" #cccccc"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#CCCCCC"});  document.body.dispatchEvent(e); return false;">#CCCCCC</a>;

09	vertical-align: middle;

10	text-align: center;

11

}

layout-grid-line プロパティ
このプロパティ。IEが独自に先行実装していたプロパティで、行の高さを指定する際に使用するものです。また、IE5以上から使えるとのこと。
デフォルト値は、none になっているようなので none以外の値を設定します。
今回のサンプルでは、高さ400px なのでその値を設定。

01	.box .image {

02	display: table-cell;

03	width: 400px;

04	height: 400px;

05	line-height: 400px;

06	background: <a class="_hootified" a="" href="#" #cccccc"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#CCCCCC"});  document.body.dispatchEvent(e); return false;">#CCCCCC</a>;

07	vertical-align: middle;

08	text-align: center;

09	layout-grid-line: 400px; /* IE7以下 */

10

}

なお、IE8以上では 標準モードで表示するとこの値が無効になるようです。

引用元≫
http://c-brains.jp/blog/wsg/13/04/08-111325.php