[CakePHP] (Twitter)Bootstrapで左寄りのpaginationをセンターに変更する方法

CakePHP Bootsratp pagination 中央揃え

CakePHPでデザインテンプレートの(Twitter)Bootstrapを使っていると、Bootstrapのバージョンによってはpaginaionのリンクが左寄せのレイアウトになってしまう場合があります。

これを中央揃えのレイアウトに変更するには、 divタグで囲み、CSSで中央揃えの設定をすることにより簡単に対処できます。

Bootstrapでpaginationを表示させると下記のように左寄りになっています。
(※Bootstrapのバージョンによっては初めから中央揃えの場合もあります。)

これを中央寄りに直します。

pagination左

CakePHPのpaginationでは「echo $this->Paginator->・・・」の形でリンクが表示されるようになりますので、これにpaginationのレイアウトを反映させるために、クラス名をpaginationにしたdivで囲みます。

この状態だとBootstrapのpaginationデザインが反映され、左寄りで表示されています。

Bootstrapのpaginationデザインを残したまま中央寄せにしたいので、<div class=”pagination”>をさらに、クラス名をpagiWrapperにしたdivで囲みます。

このpagiWrapperクラスのtext-aliginをcenterに指定すれば完成です。

CSS

結果

リンクが中央揃えに変わりました。
pagination 中央

  • Categories

  • タグ

  • アーカイブ

  • 最近の投稿