CODEWITHSUNDEEP
htmlcsstwitter-bootstrappagination
user2874270
user2874270

Reputation: 1382

Can't center bootstrap3 pagination

I'm building a site using Bootstrap 3 and I can't seem to get the pagination to center. I've done some research, and have wrapped the pagination in a div with class "text-center" but it is still not centered. My code is as follows:

<div class="text-center">
  <ul class="pagination">

    <li><a href="/categories/alternative-dairy-products/9.html">&laquo;</a></li>
    <li><a href="/categories/alternative-dairy-products/8.html">8</a></li>
    <li><a href="/categories/alternative-dairy-products/9.html">9</a></li>
    <li class="active"><a href="#">10</a></li>
    <li><a href="/categories/alternative-dairy-products/11.html">11</a></li>
    <li><a href="/categories/alternative-dairy-products/12.html">12</a></li>
    <li><a href="/categories/alternative-dairy-products/11.html">&raquo;</a></li>
  </ul>
</div>

When I use Chrome's inspect element, I can see that both the DIV and the UL take up the entire width of the content area and that they both have text-align:center. But my pagination still is to the left. Here it is live if you want to see it: http://www.aboutgmo.org/categories/alternative-dairy-products/10.html

Any ideas how I can fix this? Thanks!

Upvotes: 2

Views: 5335

Answers (2)

Parth Patel
Parth Patel

Reputation: 3997

.pagination-centered {
    text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pagination-centered">
    <nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
</div>

Upvotes: 3

Anthony Chu
Anthony Chu

Reputation: 37520

In agmo.css, there is this rule...

.pagination {
    text-align: center;
    width: 100%;
}

Remove it. The width: 100%; is causing the pagination ul to take up all the horizontal space so it can't be centered.

text-align: center; in this rule is not required either, but it wasn't the source of the problem.

Upvotes: 3

Related Questions