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

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

<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 они, но не работали.

91 голос | спросил user192362127 7 MaramThu, 07 Mar 2013 11:17:39 +04002013-03-07T11:17:39+04:0011 2013, 11:17:39

11 ответов


0

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/

ответил Praveen Kumar Purushothaman 7 MaramThu, 07 Mar 2013 11:19:39 +04002013-03-07T11:19:39+04:0011 2013, 11:19:39
0

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

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

Пример начальной загрузки 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/

ответил Ben 3 +04002013-10-03T17:41:58+04:00312013bEurope/MoscowThu, 03 Oct 2013 17:41:58 +0400 2013, 17:41:58
0

К центру нумерации страниц в 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 для получения дополнительной информации.

ответил NoobTW 27 PMpThu, 27 Apr 2017 17:39:34 +030039Thursday 2017, 17:39:34
0

Ранее упомянутые решения для 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>
ответил curtisdf 14 PM00000060000000431 2014, 18:41:04
0

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

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

Спасибо

ответил Ferhat KOÇER 14 52014vEurope/Moscow11bEurope/MoscowFri, 14 Nov 2014 12:56:51 +0300 2014, 12:56:51
0

Использование laravel с начальной загрузкой 4, решение, которое сработало:

            <div class="d-flex">
                <div class="mx-auto">
                    {{$products->links("pagination::bootstrap-4")}}
                </div>
            </div>
ответил manelseo 7 J000000Saturday18 2018, 12:17:53
0

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

Стиль

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

.pagination li {
  display: block;
 }

И лезвие :

<div class="pagination">                                              
  {{ $myCollection->render() }}
</div>
ответил Andrew 1 stEurope/Moscowp30Europe/Moscow09bEurope/MoscowSat, 01 Sep 2018 07:22:53 +0300 2018, 07:22:53
0

решение для 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>
ответил core114 26 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 26 Sep 2018 11:50:09 +0300 2018, 11:50:09
0

В v4.0.0-alpha.6:

<div class="text-center text-sm-right">
    <ul class="pagination d-inline-flex">...</ul>
</div>
ответил Cam Tullos 23 J000000Sunday17 2017, 04:51:26
0

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

ответил Emma Burrows 18 MarpmSat, 18 Mar 2017 13:31:40 +03002017-03-18T13:31:40+03:0001 2017, 13:31:40
0

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

.dataTables_paginate {
   float: none !important;
   text-align: center !important;
}
ответил ZekeMidas 31 PM000000100000004031 2017, 22:08:40

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132