CSS floatで横並びさせたリストで構成するページネーションのセンタリング

「ページネーション」とは本来編集やレイアウトの分野で、前後のページの自然な連続や演出方法を指すものですが、htmlでは、ページ送りを指します。
リストliを使った要素を横に並べる際はfloat:leftを使用して左詰めしていきます。普通は(1)のようになります。これをセンタリング表示させるためには一工夫が必要です。(2)では、position: relativeを使ってulで右に50%移動し、liで左に50%移動させています。右に寄せるにこの数値を80%程度にします。
※この方法では、IE7、8、9においてliボックスの幅が指定どおりにならないバグが出ます。そのため、(2)では、ulで右に25%移動、liでの移動は無しにしています。(3)も同様です。

また、この方法では、liのaタグにdisplay: blockが効かないため、ボックスに対してマウスオーバーできません(リンクは文字のみに)。そこで(3)ではaタグの中にspanをはさんで、それにdisplay: blockを指定して、ボックスマウスオーバーを実現させています。
※IE6以下は、(3)に対応しないので、条件コメントを使って専用CSSに変更しています。

(1)左寄せ
(2)センタリング
(3)右寄せ、ボックスマウスオーバー