web-dev-qa-db-ja.com

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は左揃えです。 ul wrt divを中央に配置する方法はありますか？

margin: auto autoとmargin :0 autoを試しましたが、うまくいきませんでした。

htmlcsstwitter-bootstrapcss3
94
user192362127

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>

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

150
Praveen Kumar Purushothaman

Bootstrap 3.0および2.3.2の両方で、ページネーションを中央にするには、。text-centerクラスを包含div。

注：マークアップ内の。paginationクラスを適用する場所は、Bootstrapの間で変更されました2.3.2および3.0。以下を参照するか、ページネーションに関するBootstrapのドキュメントを参照してください： Bootstrap 3. 、 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/

86
Ben

BS4でページネーションを中央にするには、ulにjustify-content-centerを追加する必要があります。

<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 を参照してください。

32
NoobTW

Bootstrap 4のソリューション

使用できますAlignmentこのクラスを使用justify-content-center

flexbox Utilities でページネーションコンポーネントの配置を変更します。

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

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

laravelとbootstrap 4を使用して、解決したソリューション：

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

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

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

ありがとうございました

6
Ferhat KOÇER

前述の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>
6
curtisdf

わたしにはできる：

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

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

スタイル：

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

.pagination li {
  display: block;
 }

およびブレード：

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

V4.0.0-alpha.6の場合：

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

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

提案されたソリューションを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のクラスの他の組み合わせは機能していないようです。

0
Emma Burrows

このCSSは私のために機能します：

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