HOME > 開発者向けBLOG > Webデザイン >  画像の垂直中央表示(改訂版)

Technology Note 開発者向けBLOG

Webデザイン

画像の垂直中央表示(改訂版)

こんにちは、ゼノフィ渡部です。

以前、「幅と高さが異なる画像をボックスの中で垂直中央に表示」する方法をご紹介いたしました。今回はその改訂版をご紹介いたします。

今回はIEの独自仕様である「layout-grid-line」というプロパティを追加しています。

「layout-grid-line」というプロパティは行グリッドの高さを指定するもので、ここでは「height」プロパティと同様の値を指定することで、IEでも画像の垂直表示を実現することができます。

1
2
3
4
5
6
7
8
9
10

div p {
  display: table-cell;
  width: 150px;
  height: 100px;
  line-height: 0;
  vertical-align: middle;
  border: 1px solid #CCC;
  text-align: center;
  layout-grid-line: 100px; /* IE用 */
}

以前の紹介と同様に、サイズが違う画像(大)と画像(小)を比較しています。

IE7、IE6用に使用していた「img」タグの上にあった「span」タグを今回は削除しています。

「span」タグに指定していた「zoom: 1;」プロパティの変わりが「p」タグに指定している、「layout-grid-line」プロパティになります。

1
2
3
4
5
6
7
8
9
10
11

<div>
    <p>
        <img src="img_big.gif" alt="サンプル画像(大)" />
    </p>
</div>
 
<div>
    <p>
        <img src="img_small.gif" alt="サンプル画像(小)" />
    </p>
</div>

サンプルを見ると画像(大)と画像(小)が垂直中央に表示されていると思います。

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

div {
  float: left;
  margin: 0 10px 0 0;
}
 
div p {
  display: table-cell;
  width: 150px;
  height: 100px;
  line-height: 0;
  vertical-align: middle;
  border: 1px solid #CCC;
  text-align: center;
  layout-grid-line: 100px; /* IE用 */
}
 
div p img {
  max-width: 150px;
  max-height: 100px;
  vertical-align: middle;
}
 
/* IE6 */
div img {
  _margin-top: -1px; /* 微調整 */
}
 
/* IE7 */
*:first-child+html div img {
  margin-top: -1px; /* 微調整 */
}

HTML

1
2
3
4
5
6
7
8
9
10
11

<div>
    <p>
        <img src="img_big.gif" alt="サンプル画像(大)" />
    </p>
</div>
 
<div>
    <p>
        <img src="img_small.gif" alt="サンプル画像(小)" />
    </p>
</div>

<

>

PAGETOP