Centering page numbers

Navigation
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 centralize the div that will contain these numbers, but how can I centralize the numbers? Remembering that these numbers are dynamic, I used these 4 as an example only, and still have the < & > arrows going to last and first page. Is there any plugin, or anything I can do with just CSS or will I have to do calculations with Jquery?

Do not yet set up the framework for this. 

<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 examples, you can have only 1, 2, 3, 4, and so on.

    
asked by anonymous 10.12.2014 / 19:12

2 answers

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

    
10.12.2014 / 19:25
2

Here's an example of how I usually do it.

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;
}

JSFiddle Example

I hope it's useful.

    
10.12.2014 / 19:47
Rookie in applications. Where to start? Select Subqueries