Bootstrap3のpaginationでtext-algn centerが効かない問題をちゃんと調べてみる

Bootstrap3のpaginationはデフォルトでは左寄せとなっています。

            <ul class="pagination">
                <li class="privious"><a href="#">前へ</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><span>…</span></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li class="next"><a href="#">次へ</a></li>
            </ul>

  中央寄せにするためには、paginationクラスをつけた要素のwrapperにtext-centerのクラス追加してやれば実現できます。

        <div class="text-center">
            <ul class="pagination">
                <li class="privious"><a href="#">前へ</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><span>…</span></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li class="next"><a href="#">次へ</a></li>
            </ul>
        </div>

と、解決するのは簡単ですが、そもそもなぜこういったことが必要なのか、ちゃんと向き合ってみました。

通常、li要素はinline要素なので、ulにtext-align:center;をつけるとul要素の幅に合わせて中央に配置することが可能です。（liの左側についているline-styleはulの幅に合わせて左側に配置されるがその場合はline-style-positionなどをいじる）

ただ、paginationクラスを付けたul要素に単純に text-align:center; を付けてもうまく中央寄せすることはできません。これは、pagination>li>aにfloat:leftが付いているのでli要素には実質中身がない状態になっているためです。

と、inline要素でもfloatなどで中身がない状態になってしまうとtext-align:centerが効かないことがあるということですね。

今回のBootstrapのケースではpaginationクラスがinline-blockであることから外側からtext-centerを付けて中央寄せすると簡単に中央寄せできるというアプローチでした。