จัดหน้าให้อยู่กึ่งกลางใน bootstrap

ฉันมีรหัสนี้อยู่ในเลขหน้า

<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พวกเขา แต่ไม่ได้ผล

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/

สำหรับทั้งเงินทุน 3.0 และ 2.3.2 เพื่อให้เลขศูนย์ที่.Text ศูนย์ระดับสามารถนำไปใช้ที่มีdiv

หมายเหตุ: ตำแหน่งที่จะใช้คลาส. เพจในมาร์กอัปมีการเปลี่ยนแปลงระหว่าง Bootstrap 2.3.2 และ 3.0 ดูด้านล่างหรืออ่านเอกสารเงินทุนในการแบ่งหน้า: 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ใน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">

ดูPagination Bootstrap 4สำหรับข้อมูลเพิ่มเติม

ใช้ laravel กับ bootstrap 4 วิธีแก้ปัญหาที่ได้ผล:

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

โซลูชันสำหรับ Bootstrap 4

คุณสามารถใช้ Alignment ได้ โดยใช้คลาสนี้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>

bootstrap 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หรือระดับบนห่อ div ลำบากในการทำงาน

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>