У меня этот код в разбивке на страницы
<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 wrt div?
Я пробовал margin: auto auto и margin :0 auto, но они не работали.
<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>
<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>
<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;
Или если вы хотите использовать класс 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>
Для обоих 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>
Чтобы центрировать нумерацию страниц в 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 для получения дополнительной информации.
Ранее упомянутые решения для Bootstrap 3.0 не работали для меня в 3.1.1. Класс pagination имеет display:block, а элементы <li> имеют float:left, что означает, что просто обертка <ul> in 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>
Вы можете добавить свой собственный Css:
.pagination{
display:table;
margin:0 auto;
}
Спасибо
Это работает для меня:
<div class="text-center">
<ul class="pagination pagination-lg">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</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">»</span>
</a>
</li>
</ul>
Используя laravel с bootstrap 4, решение, которое сработало:
<div class="d-flex">
<div class="mx-auto">
{{$products->links("pagination::bootstrap-4")}}
</div>
</div>
Вот это, это сработало для меня:
Стиль:
.pagination {
display: flex;
justify-content: center;
}
.pagination li {
display: block;
}
И клинок:
<div class="pagination">
{{ $myCollection->render() }}
</div>
решение для 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.0.0-alpha.6:
<div class="text-center text-sm-right">
<ul class="pagination d-inline-flex">...</ul>
</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;
}
начальная загрузка 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>
You can use the below code to center pagination
.pagination-centered {
text-align: center;
}<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'; return false;" 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>