読者です 読者をやめる 読者になる 読者になる

ひよっこPGのブログ

主に、技術メモや英語たまにギター関連のことも書いているブログです。

BootStrap 3.0のpagerをセンタリング centerにする方法

BootStrap 3.0で、ページャー部品を使おうと使うとデフォルトが左寄せになっていたので
中央寄せにしたいな。と思って調べた結果をメモっています。

BootStrap 3.0のページャーについて知らない方は下記をどうぞ^ー^
Components · Bootstrap

方法

BootStrapでは 文字を中央揃えにするclassを定義してある。

.text-center {
  text-align: center;
}

この .text-centerをあてたDIV要素の中にページャーを入れる。

<div class="text-center">
    <ul class="pagination">
      <li><a href="#">&laquo;</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">&raquo;</a></li>
    </ul>
</div>

上記のような感じです。そうすると下の画像のようにセンタリングされます。
f:id:buzzword111:20140314103429j:plain
text-align: centerで中央揃えになるのは、 inline-blockだからだと思います。

jsFiddleでもあげてますので、ご参考に^ー^
Edit fiddle - JSFiddle