부트 스트랩에서 페이지 매김을 중앙에 배치

페이지 매김 에이 코드가 있습니다.

<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왼쪽 정렬입니다. ulwrt 를 중앙에 배치하는 방법이 div있습니까?

나는 시도 margin: auto auto하고 margin :0 auto그들이 있지만 작동하지 않았다.

부트 스트랩은 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/

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/

부트 스트랩 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에 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>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

자세한 내용은 페이지 매김 부트 스트랩 4 를 참조하십시오 .

작동했던 솔루션 인 부트 스트랩 4와 함께 laravel 사용 :

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

부트 스트랩 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>

앞서 언급 한 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속성을 생략하고 대신 스타일 시트에 넣으십시오.

.pagination {
    display: inline-block;
}

그런 다음 이전에 제안한 마크 업을 사용합니다.

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

사용자 지정 CSS를 추가 할 수 있습니다.

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

감사합니다

이것은 나를 위해 일했습니다.

스타일 :

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

.pagination li {
  display: block;
 }

그리고 블레이드 :

<div class="pagination">                                              
  {{ $myCollection->render() }}
</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>

v4.0.0-alpha.6에서 :

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

부트 스트랩 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> 

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포장의 사업부 또는 클래스 일 것 같았다.

이 CSS는 나를 위해 작동합니다.

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

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>