Центрирование разбиения на страницы в bootstrap

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

Примечание: когда применять .разбиение на страницы класс в разметке изменился между 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/

чтобы центрировать разбиение на страницы в BS4, следует добавить justify-content-center in 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 для получения дополнительной информации.

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

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

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

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

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

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

спасибо

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

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

в V4.0.0-Альфа.6:

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

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

стиль:

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

.pagination li {
  display: block;
 }

и лезвие:

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

Я не мог получить ни одного из предложенных решений для работы с 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, казалось, работал.

этот css работает для меня:

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

решение для 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>

You can use the below code to center pagination 

.pagination-centered {
    text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pagination-centered">
    <ul class="pagination">
      <li class="active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
</div>