[CakePHP] (Twitter)Bootstrapで左寄りの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に指定すれば完成です。

echo '<div class="pagiWrapper">';
        echo '<div class="pagination">';
        echo $this->Paginator->first('最初', $options = array());
        echo $this->Paginator->prev('前へ', array(), null, array('class' => 'prev disabled'));
        echo $this->Paginator->numbers(array('separator' => ''));
        echo $this->Paginator->next('次へ', array(), null, array('class' => 'next disabled'));
        echo $this->Paginator->last('最後', $options = array());
        echo '</div>';
echo '</div>';
CSS
.pagiWrapper{
   text-align:center;
}     
結果

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



Author: webmaster