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

Technology Note 開発者向けBLOG

Webデザイン

画像の垂直中央表示

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

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

中央に関してはそれほど難しくはありませんが、テーブルタグを使用せず、クロスブラウザで垂直表示にする場合は工夫が必要です。

テクニックのポイントはdisplayプロパティの「table-cell」です。

「div.box p」でボックス内のp要素に対し、「display: table-cell;」でテーブルの構造を表現します。続いて、テーブル内で使用される「vertical-align: middle;」で画像を垂直に、「text-align: center;」で中央に寄せます。

これで幅と高さが決められているボックス内であれば、モダンなブラウザなら画像を垂直中央に表示させることができます。

1
2
3
4
5
6

div.box p {
  display: table-cell; /* p要素でテーブルの構造を表現 */
  vertical-align: middle; /* 画像を垂直に */
  text-align: center; /* 画像を中央に */
  line-height: 0; /* ボックス内でのp要素の余分な下スペースを消去 */
}

IE6やIE7ではもう少し工夫が必要です。IE6、IE7用に、span要素をp要素内かつ、img要素の前に記述します。そしてspan要素に対し、「div.box p span 」として「zoom: 1;」、「line-height: 100px;」、「margin-top: -1px;」を指定します。

「zoom: 1;」でhasLayoutの設定をtrueにし「line-height」プロパティを有効にさせます。line-heightの値を100pxとしている理由はインライン要素の行の高さと画像の高さを同じにさせ、結果的に縦に垂直配置させるためです。「margin-top: -1px;」は微調整のために使用しています。必ずしも-1pxである必要はありません。あとは「div.box p img」の「vertical-align: middle;」でimg要素(画像)を垂直に移動させます。

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="box">
    <p>
        <span></span>
        <img src="img_big.gif" alt="サンプル画像(大)" />
    </p>
</div>
 
<div class="box">
    <p>
        <span></span>
        <img src="img_small.gif" alt="サンプル画像(小)" />
    </p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/* IE6 */
div.box p span {
  _zoom: 1; /* hasLayoutをtrueに設定 */
  _line-height: 100px; /* span要素の行を画像の最大の高さと同じ値に設定 */
  _margin-top: -1px; /* 微調整 */
}
 
div.box p img {
  _vertical-align: middle; /* 画像を垂直に */
}
 
/* IE7 */
*:first-child+html div.box p span {
  zoom: 1; /* hasLayoutをtrueに設定 */
  line-height: 100px; /* span要素の行を画像の最大の高さと同じ値に設定 */
  margin-top: -1px; /* 微調整 */
}
 
*:first-child+html div.box p img {
  vertical-align: middle; /* 画像を垂直に */
}

補足ですが、boxよりも大きい画像が表示される可能性がある場合、img要素に最大の幅と高さを指定するmaxプロパティを使用すると便利です。

「div.box p img」に「max-width: 150px;」、「max-height: 100px;」とすると、その指定した数値以上の画像は表示されません。ただ、IE6はmaxプロパティに対応していませんので、javascriptやIEの独自拡張であるexpressionなどで実現させる必要があります。

1
2
3
4

div.box p img {
  max-width: 150px;
  max-height: 100px;
}

今回ご紹介した方法は、写真ギャラリーなどで使用すると良いのではないでしょうか。

サンプル

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45

div.box,
div.box p {
  width: 150px;
  height: 100px;
}
 
div.box {
  float: left;
  margin: 0 10px 0 0;
  border: 1px solid #CCC;
}
 
div.box p {
  display: table-cell; /* p要素でテーブルの構造を表現 */
  vertical-align: middle; /* 画像を垂直に */
  text-align: center; /* 画像を中央に */
  line-height: 0; /* ボックス内でのp要素の余分な下スペースを消去 */
}
 
div.box p img {
  max-width: 150px;
  max-height: 100px;
}
 
/* IE6 */
div.box p span {
  _zoom: 1; /* hasLayoutをtrueに設定 */
  _line-height: 100px; /* span要素の行を画像の最大の高さと同じ値に設定 */
  _margin-top: -1px; /* 微調整 */
}
 
div.box p img {
  _vertical-align: middle; /* 画像を垂直に */
}
 
/* IE7 */
*:first-child+html div.box p span {
  zoom: 1; /* hasLayoutをtrueに設定 */
  line-height: 100px; /* span要素の行を画像の最大の高さと同じ値に設定 */
  margin-top: -1px; /* 微調整 */
}
 
*:first-child+html div.box p img {
  vertical-align: middle; /* 画像を垂直に */
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13

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

<

>

PAGETOP