こんにちは。
今回はページャー（ページ送り）等の幅の数値が決まっていないボックスのセンター配置の方法です。
ボックスの幅の数値が決まっていれば、下記の方法でセンター配置する事ができます。
1 2 | width: 500px; margin: 0 auto; |
がページャ等はボックスの幅が変化するので使えません。
で変化する場合は下記のようにします。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="pager"> <ul> <li><a href="#">Back</a></li> <li><a href="#">1</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> <li><a href="#">23</a></li> <li><a href="#">Next</a></li> </ul> </div> |
CSS
1 2 3 4 5 6 7 8 | .pager { text-align: center; } .pager li { display: inline-block; *display:inline; zoom:1; } |
コードを見てすぐに分かると思いますが、
inline-blockにする事でtext-align: center;でセンター配置にする事ができます。
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
いかがでしたか。今回はページャーを例にしましたが、いろんな所で応用して使えると思います。
以上でページャー（ページ送り）等の幅の数値が決まっていないボックスのセンター配置の方法でした。
