it-swarm.com.ru

Центрирование нумерации страниц в начальной загрузке

У меня есть этот код в нумерации страниц

<div class="pagination">
    <ul>
        <li><a href="?p=0" data-original-title="" title="">1</a></li> 
        <li><a href="?p=1" data-original-title="" title="">2</a></li> 
    </ul>
</div>

Но мой ul выровнен. Есть ли способ отцентрировать ul относительно div?

Я пробовал margin: auto auto и margin :0 auto, но они не работали.

92
user192362127

Bootstrap добавил новый класс с 3.0.

<div class="text-center">
    <ul class="pagination">
        <li><a href="?p=0" data-original-title="" title="">1</a></li> 
        <li><a href="?p=1" data-original-title="" title="">2</a></li> 
    </ul>
</div>

Bootstrap 4 имеет новый класс

<div class="text-xs-center">
    <ul class="pagination">
        <li><a href="?p=0" data-original-title="" title="">1</a></li> 
        <li><a href="?p=1" data-original-title="" title="">2</a></li> 
    </ul>
</div>

Для 2.3.2

<div class="pagination text-center">
    <ul>
        <li><a href="?p=0" data-original-title="" title="">1</a></li> 
        <li><a href="?p=1" data-original-title="" title="">2</a></li> 
    </ul>
</div>

Дайте этот путь:

.pagination {text-align: center;}

Это работает, потому что ul использует inline-block;

Скрипка: http://jsfiddle.net/praveenscience/5L8fu/


Или, если вы хотите использовать класс Bootstrap:

<div class="pagination pagination-centered">
    <ul>
        <li><a href="?p=0" data-original-title="" title="">1</a></li> 
        <li><a href="?p=1" data-original-title="" title="">2</a></li> 
    </ul>
</div>

Скрипка: http://jsfiddle.net/praveenscience/5L8fu/1/

149
Praveen Kumar Purushothaman

Как для Bootstrap 3.0, так и для 2.3.2, для разбивки на страницы по центру класс .text-center может быть применен к содержащему div.

Примечание: Где применять класс .pagination в разметке, изменилось между Bootstrap 2.3.2 и 3.0. Смотрите ниже или прочитайте документацию Bootstrap по нумерации страниц: Bootstrap 3.0 , Bootstrap 2.3.2 .

Bootstrap 3 Пример

<div class="text-center">
    <ul class="pagination">
        <li><a href="?p=0" data-original-title="" title="">1</a></li> 
        <li><a href="?p=1" data-original-title="" title="">2</a></li> 
    </ul>
</div>

http://jsfiddle.net/mynameiswilson/eYNMu/

Bootstrap 2.3.2 Пример

<div class="pagination text-center">
    <ul>
        <li><a href="?p=0" data-original-title="" title="">1</a></li> 
        <li><a href="?p=1" data-original-title="" title="">2</a></li> 
    </ul>
</div>

http://jsfiddle.net/mynameiswilson/84X3M/

86
Ben

Для центрирования нумерации страниц в BS4 следует добавить justify-content-center в ul:

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

Смотрите Pagination Bootstrap 4 для получения дополнительной информации.

21
NoobTW

Ранее упомянутые решения для Bootstrap 3.0 не работали для меня на 3.1.1. Класс нумерации страниц имеет display:block, а элементы <li> имеют float:left, что означает, что простое обертывание <ul> в один только text-center не работает. Я понятия не имею, как и когда все изменилось между 3.0 и 3.1.1. Во всяком случае, я должен был заставить <ul> использовать display:inline-block вместо этого. Вот код:

<div class="text-center">
    <ul class="pagination" style="display:inline-block">
        <li><a href="...">...</a></li>
    </ul>
</div>

Или для более чистой настройки, пропустите атрибут style и поместите его в таблицу стилей:

<style>
    .pagination {
        display: inline-block;
    }
</style>

А затем используйте разметку, предложенную ранее:

<div class="text-center">
    <ul class="pagination">
        <li><a href="...">...</a></li>
    </ul>
</div>
5
curtisdf

решение для Bootstrap 4

Вы можете использовать его Выравнивание Используйте этот класс justify-content-center

Измените выравнивание компонентов нумерации страниц с помощью утилиты flexbox .

и узнать больше об этом нумерация страниц

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>



<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

4
core114

Вы можете добавить свой собственный Css:

.pagination{
    display:table;
    margin:0 auto;
}

Спасибо

4
Ferhat KOÇER

Меня устраивает:

<div class="text-center">
<ul class="pagination pagination-lg">
   <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>

4
naty

Используя laravel с bootstrap 4, решение, которое сработало:

            <div class="d-flex">
                <div class="mx-auto">
                    {{$products->links("pagination::bootstrap-4")}}
                </div>
            </div>
3
manelseo

Вот это, это сработало для меня:

Стиль :

.pagination {
  display: flex;
  justify-content: center;
}

.pagination li {
  display: block;
 }

И клинок :

<div class="pagination">                                              
  {{ $myCollection->render() }}
</div>
2
Andrew

В v4.0.0-alpha.6:

<div class="text-center text-sm-right">
    <ul class="pagination d-inline-flex">...</ul>
</div>
1
Cam Tullos

начальная загрузка 4:

<!-- Default (left-aligned) -->
<ul class="pagination" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

<!-- Center-aligned -->
<ul class="pagination justify-content-center" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

<!-- Right-aligned -->
<ul class="pagination justify-content-end" style="margin:20px 0">
  <li class="page-item">...</li>
</ul> 
0
Eassa Nassar

Я не смог заставить ни одно из предложенных решений работать с Bootstrap 4 alpha 6, но следующий вариант, наконец, дал мне центрированную полосу пагинации.

Переопределение CSS:

.pagination {
  display: inline-flex;
  margin: 0 auto;
}

HTML:

<div class="text-center">
  <ul class="pagination">
    <li><a href="...">...</a></li>
  </ul>
</div>

Никакая другая комбинация display, margin или класса в div-обертке не сработала.

0
Emma Burrows

Этот CSS работает для меня:

.dataTables_paginate {
   float: none !important;
   text-align: center !important;
}
0
ZekeMidas