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に指定すれば完成です。
|
0 1 2 3 4 5 6 7 8 9 10 |
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
|
0 1 2 3 4 |
.pagiWrapper{ text-align:center; } |
結果
リンクが中央揃えに変わりました。
