html - ブートストラップでページネーションを中央に配置する

Question

私はこのコードをページネーションに持っています

<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

Answer 1

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>

Bootstrap4に新しいクラスがあります

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

Answer 2

Bootstrap 3.0と2.3.2の両方で、ページ付けを中央に配置するために、.text-centerクラスを含むdivに適用できます。

注：マークアップで.paginationクラスを適用する場所は、Bootstrap2.3.2と3.0の間で変更されました。以下を参照するか、ページ付けに関するBootstrapドキュメントをお読みください：Bootstrap 3.0、Bootstrap2.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/

Answer 3

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

詳細については、 PaginationBootstrap4を参照してください。

Answer 4

ブートストラップ4でlaravelを使用すると、機能したソリューションは次のとおりです。

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

Answer 5

Bootstrap4のソリューション

あなたはそれを使うことができます アライメント はこのクラスを使うjustify-content-center

フレックスボックスユーティリティを使用して、ページ付けコンポーネントの配置を変更します。

そしてそれについてもっと学ぶ

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

Answer 6

前述のBootstrap3.0のソリューションは、3.1.1では機能しませんでした。ページネーションクラスにはdisplay:blockがあり、<li>要素にはがあります。これは、単にinfloat:leftをラップするだけでは機能しないことを意味します。3.0と3.1.1の間で、いつ、どのように状況が変わったのかわかりません。とにかく、代わりに使っていました。コードは次のとおりです。<ul>text-center<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>

Answer 7

カスタムCssを追加できます。

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

ありがとうございました

Answer 8

これ、それは私のために働いた：

スタイル：

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

.pagination li {
  display: block;
 }

そしてブレード：

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

Answer 9

わたしにはできる：

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

Answer 10

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のクラスの他の組み合わせは機能していないようです。

Answer 11

Boostrap5のページ付けのセンタリング

        <ul class=" pagination justify-content-center >";

使用： https ：//getbootstrap.com/docs/5.0/components/pagination/ および https://getbootstrap.com/docs/5.0/utilities/flex/

Answer 12

v4.0.0-alpha.6の場合：

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

Answer 13

ブートストラップ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> 

Answer 14

このcssは私のために働きます：

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

Answer 15

ブートストラップを使用する場合

ブレードページ

<div class="pagination justify-content-center">
   {{ $products->links() }}
     //or
   {{ $products->render() }}
</div>

Answer 16

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>