How can pagination make the current page in the center? Suppose if the 4th page is selected, then it would be in the center, and 1-3 next to the left, and 5-7 next to the right. Code:

<div> <a class="page">1</a> <a class="page">2</a> <a class="page">3</a> <a class="actual_page">4</a> <a class="page">5</a> <a class="page">6</a> <a class="page">7</a> </div>

  • I think js can’t do without here - Cheg
  • @Cheg, how is it possible with js? - NTP
  • jquery fits? - Cheg
  • @Cheg, it doesn't matter :) - NTP
  • And the width of the links for all the same? - Cheg

1 answer 1

Because CSS did not provide any topstarter, based on this you can do something like this:

 $('div').each(function() { var pages = $(this).find('.page'), // все ссылки pagesLength = pages.length, // кол-во страниц active = $(this).find('.actual_page').index() + 1, // номер активной страницы pageWidth = pages.outerWidth(), // ширина ссылки pagesRight = pagesLength - active, // кол-во страниц справа от активной pagesLeft = pagesLength - pagesRight - 1, // кол-во страниц слева от активной pagesDiff = (pagesLeft - pagesRight); // разница между кол-вами страниц слева и справа if (pagesDiff < 0) { // если слева меньше $(this).css({ 'padding-right': '0px', 'padding-left': pagesDiff * -1 * pageWidth + 'px' }); } else if (pagesDiff > 0) { // если справа меньше $(this).css({ 'padding-left': '0px', 'padding-right': pagesDiff * pageWidth + 'px' }); } else if (pagesDiff == 0) { // если равно $(this).css({ 'padding-left': '0px', 'padding-right': '0px' }); } }); 
 div { text-align: center; font-size: 0px; line-height: 0px; position: relative; } div:before { display: block; content: ''; width: 1px; height: 220%; background: #e1e1e1; position: absolute; left: 50%; top: -60%; z-index: -1; } a { font-size: 16px; line-height: 16px; padding: 0 5px; width: 10px; display: inline-block; } a.actual_page { color: #f00; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <a class="page actual_page">1</a> <a class="page">2</a> <a class="page">3</a> <a class="page">4</a> <a class="page">5</a> <a class="page">6</a> <a class="page">7</a> </div><br /> <div> <a class="page">1</a> <a class="page actual_page">2</a> <a class="page">3</a> <a class="page">4</a> <a class="page">5</a> <a class="page">6</a> <a class="page">7</a> </div><br /> <div> <a class="page">1</a> <a class="page">2</a> <a class="page actual_page">3</a> <a class="page">4</a> <a class="page">5</a> <a class="page">6</a> <a class="page">7</a> </div><br /> <div> <a class="page">1</a> <a class="page">2</a> <a class="page">3</a> <a class="page actual_page">4</a> <a class="page">5</a> <a class="page">6</a> <a class="page">7</a> </div><br /> <div> <a class="page">1</a> <a class="page">2</a> <a class="page">3</a> <a class="page">4</a> <a class="page actual_page">5</a> <a class="page">6</a> <a class="page">7</a> </div><br /> <div> <a class="page">1</a> <a class="page">2</a> <a class="page">3</a> <a class="page">4</a> <a class="page">5</a> <a class="page actual_page">6</a> <a class="page">7</a> </div><br /> <div> <a class="page">1</a> <a class="page">2</a> <a class="page">3</a> <a class="page">4</a> <a class="page">5</a> <a class="page">6</a> <a class="page actual_page">7</a> </div><br />

For this example to work correctly, it is IMPORTANT that:

  • paginator links should be the same width;
  • there should be no distance between links.