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

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

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

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

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

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>';