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

2014/08/23

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

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

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

 

HTML

 

CSS

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

 

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

 

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

topへ戻る