ページ分割などでよくあるインターフェース。これをコーディングするとき、ul
要素(とli
要素)ではセンタリングできないのでtable
要素を使っていました。
コーディングする際に問題になるのは、幅が可変だということです。幅が決まっていれば、width
を指定した上、margin: auto
でこと足りますが、幅が指定できない場合、ul
要素の幅は100%です。そこで、内容に合わせて可変幅を持つtable
要素の出番、となるわけです。
しかし、よく調べてみるとリスト要素はセンタリングすることができるようです。
参考:リストのセンタリング
<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>
.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
要素を使ってはいけない」などのコーディングルールを指定される場合もあるので、この方法を知っていると心強いです。