Centralize page numbers

Asked

Viewed 162 times

0

I have the following pagination: < 1 2 3 4 >. Perfect, what happens is that this page is in the middle of the page. I can center the div which will contain these numbers, but how to do to centralize the numbers? Remembering that these numbers are dynamic, I used these 4 only as an example, and still have the arrows < and >, that goes to last and first page. There is some plugin, or something I can do only with CSS or I will have to do calculations with Jquery?

Don’t set up the structure for that yet.

<ul>
    <li><</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>></li>
</ul>

Remembering that the numbers 1 2 3 4 are example, can have only 1, 2, 3, 4 and so on.

jquery css
  • 1

    It depends on how the HTML is. Include the code in the question.

  • Ever tried to use ul li{display:inline} ? or that’s not what you need?

  • @Antonyalkmim is not that.

2 answers

2

Follow an example of how I normally do.

HTML

<div class="navigation">
    <div class="pagination">
        <span>Página x de x</span>
        <span class="current">1</span>
        <a href='#' class="inactive">2</a>
        <a href='#' class="inactive">3</a>
        <a href='#' class="inactive">4</a>
        <a href="#">Próxima &rsaquo;</a>
        <a href='#'>Última &raquo;</a>
    </div>
</div>

CSS

.pagination {
    clear:both;
    position:relative;
    font-size:12px;
    text-align:center;
}

.pagination span, .pagination a {
    display:inline-block;
    margin: 2px 2px 2px 0;
    padding:6px 9px 5px 9px;
    text-decoration:none;
    color: #ddd;
    background: #222;
}

.pagination .current{
    padding:6px 9px 5px 9px;
    font-weight: bold;
    background: #0950E8;
}

Example in Jsfiddle

I hope it will be useful.

1


You can do it this way:

div.paginacao{float: left; width: 100%; text-align: center}
div.paginacao > div.list{display:inline-block}
div.paginacao ul{list-style: none; padding: 0; margin: auto;}
div.paginacao ul > li{cursor: pointer; padding:2px; margin: 2px; float: left; border: 1px solid #ccc; width:20px; text-align: center}
div.paginacao ul > li:hover{background-color: #efefef;}
<div class="paginacao">
  <div class="list">
    <ul>
      <li>◄</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>►</li>
    </ul>
  </div>
</div>

UPDATE

  • great example, but how will I have a li that may have less than 4 items, not fit for me, because if you have less than 4 it does not center correctly

  • 1

    @Felipestoker, I made some changes in the example. I believe that now meets your need.

  • This is exactly what I needed, I could never do it only with CSS, I always had to use Jquery :)

Browser other questions tagged jquery css

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