ページ分割などでよくあるインターフェース。これをコーディングするとき、ul要素(とli要素)ではセンタリングできないのでtable要素を使っていました。

リスト要素のセンタリング

コーディングする際に問題になるのは、幅が可変だということです。幅が決まっていれば、widthを指定した上、margin: autoでこと足りますが、幅が指定できない場合、ul要素の幅は100%です。そこで、内容に合わせて可変幅を持つtable要素の出番、となるわけです。

しかし、よく調べてみるとリスト要素はセンタリングすることができるようです。

参考:リストのセンタリング

1
2
3
4
5
6
7
<ul class="pagenate">
  <li><span class="current">1</span></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.pagenate {
  text-align: center;
}
.pagenate li {
  display: -moz-inline-box;/*for FF2*/
  display: inline-block;/*Modern Browser & FF3*/
}
/* Windows IE6 only */
* html .pagenate li {
  display: inline;
  zoom: 1;
}
/* Windows IE7 only */
*+html .pagenate li {
  display: inline;
  zoom: 1;
}
.pagenate a {

}
.pagenate .current {

}

親要素にtext-align: centerを指定した上、ブロック要素であるli要素をインライン要素として表示するだけです。ただし、display: inline-blockの実装はブラウザによって異なるのでそこは気をつけなければなりません。標準モード、互換モードに関わらず表示できます。

それっておいしいの?

ページ分割の場合、中身のテキストは数字だけですからわざわざリストを使用する必要性はなさそうです。ハックを使用せず、table要素にmargin: autoを指定するだけの丈夫なコーディングをするほうが効率はいいのではないかと思います。

が、「レイアウトにtable要素を使ってはいけない」などのコーディングルールを指定される場合もあるので、この方法を知っていると心強いです。

リスト要素のセンタリングのサンプル(標準モード)

リスト要素のセンタリングのサンプル(後方互換モード)