ページャー(ページ送り)等の幅の数値が決まっていないボックスのセンター配置!

2014/08/23

こんにちは。
今回はページャー(ページ送り)等の幅の数値が決まっていないボックスのセンター配置の方法です。

ボックスの幅の数値が決まっていれば、下記の方法でセンター配置する事ができます。

[css]
width: 500px;
margin: 0 auto;
[/css]

がページャ等はボックスの幅が変化するので使えません。
で変化する場合は下記のようにします。

 

HTML

[html]

[/html]

 

CSS

[html]
.pager {
text-align: center;
}
.pager li {
display: inline-block;
*display:inline;
zoom:1;
}
[/html]

コードを見てすぐに分かると思いますが、
inline-blockにする事でtext-align: center;でセンター配置にする事ができます。

 

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

 

今回はページャーを例にしましたが、いろんな所で応用して使えると思います。
以上でページャー(ページ送り)等の幅の数値が決まっていないボックスのセンター配置の方法でした。

この記事を読んだ人はこんな記事も読んでいますよ

Topへ戻る