Bootstrap 3 Pagination - Do not centralize

Asked

Viewed 77 times

4

The code below even exaggerated the centralized alignment classes, and still does not centralize (Twitter-Bootstrap 3.7):

<section>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 center-block text-center">
            <nav aria-label="Paginação">
                <ul class="pagination pagination-lg pagination-centered center-block text-center">
                    <li class='active'><a href="?pg=<?php echo $dry*$st; ?>"><?php echo $dry*$st; ?></a></li>
                    <li><a href="?pg=<?php echo $dry*$st; ?>"><?php echo $dry*$st; ?></a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</section>

1 answer

3

It’s because you put the class center-block in the father and son, just put in the col father

The original display of pagination is display: inline-block;, but when you put in it center-block he becomes display:block, and is occupying 100% of the width of the father, so does not centralize, because he is occupying all space and not just the space "of himself"

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />


      <section>
         <div class="container">
               <div class="row">
                  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 center-block text-center">
                     <nav aria-label="Paginação">
                           <ul class="pagination pagination-lg pagination-centered  text-center">
                              <li class='active'><a href="?pg=<?php echo $dry*$st; ?>"><?php echo $dry*$st; ?></a></li>
                              <li><a href="?pg=<?php echo $dry*$st; ?>"><?php echo $dry*$st; ?></a></li>
                           </ul>
                     </nav>
                  </div>
               </div>
         </div>
      </section>

  • 2

    Perfect, thank you Hugo!

  • 1

    I understood, I inspected the elements of the Nav and I understood better, I believe that no more mistake with this =)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.