HOME > 開発者向けBLOG > Webデザイン >  要素を中央に配置

Technology Note 開発者向けBLOG

Webデザイン

要素を中央に配置

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

高さが決まっていない要素を中央に配置する方法をご紹介いたします。

「div.vertical_box p」でテキストをマークアップしているp要素に「display: table-cell;」、「 vertical-align: middle;」を指定し、テキストを中央に配置するようにします。IE6とIE7は「display: table-cell;」に対応していませんので、「display: inline」、「zoom: 1」を別に指定し「display: table-cell;」と同じ振る舞いをさせます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

div.vertical_box p {
  display: table-cell; /* テーブル構造を表現 */
  width: 150px;
  vertical-align: middle; /* 要素を中央に配置 */
  padding: 5px;
}
 
/* IE6 */
div.vertical_box p {
  _display: inline;
  _zoom: 1;
}
 
/* IE7 */
*:first-child+html div.vertical_box p {
  display: inline;
  zoom: 1;
}

左テキストが多い場合のソース、右テキストが多い場合のソースを記述しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div class="vertical_box">
    <p>
        左テキスト左テキスト左テキスト左テキスト左テキスト左テキスト
    </p>
    <p>
        右テキスト
    </p>
</div>
 
<div class="vertical_box">
    <p>
        左テキスト
    </p>
    <p>
        右テキスト右テキスト右テキスト右テキスト右テキスト右テキスト
    </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

div.vertical_box {
  margin: 0 0 40px;
}
 
div.vertical_box p {
  display: table-cell; /* テーブル構造を表現 */
  width: 150px;
  vertical-align: middle; /* 要素を中央に配置 */
  padding: 5px;
}
 
/* IE6 */
div.vertical_box p {
  _display: inline;
  _zoom: 1;
}
 
/* IE7 */
*:first-child+html div.vertical_box p {
  display: inline;
  zoom: 1;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div class="vertical_box">
    <p>
        左テキスト左テキスト左テキスト左テキスト左テキスト左テキスト
    </p>
    <p>
        右テキスト
    </p>
</div>
 
<div class="vertical_box">
    <p>
        左テキスト
    </p>
    <p>
        右テキスト右テキスト右テキスト右テキスト右テキスト右テキスト
    </p>
</div>

<

>

PAGETOP