it-swarm.com.de

Zentrieren der Paginierung im Bootstrap

Ich habe diesen Code in Paginierung

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

Mein ul ist jedoch links ausgerichtet. Gibt es eine Möglichkeit, ul wrt div zu zentrieren?

Ich habe margin: auto auto und margin :0 auto versucht, aber sie funktionierten nicht.

92
user192362127

Bootstrap hat eine neue Klasse aus 3.0 hinzugefügt.

<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 hat eine neue Klasse

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

Für 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>

Gib diesen Weg:

.pagination {text-align: center;}

Es funktioniert, weil ulinline-block; verwendet.

Geige: http://jsfiddle.net/praveenscience/5L8fu/


Oder wenn Sie die Klasse von Bootstrap verwenden möchten:

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

Geige: http://jsfiddle.net/praveenscience/5L8fu/1/

Sowohl für Bootstrap 3.0 als auch für 2.3.2 kann die .text-center -Klasse zum Zentrieren der Paginierung auf das enthaltende div angewendet werden.

Hinweis: Wo die Klasse .pagination im Markup angewendet werden soll, hat sich zwischen Bootstrap 2.3.2 und 3.0 geändert. Siehe unten oder lesen Sie die Bootstrap-Dokumente zum Thema Paginierung: Bootstrap 3.0 , Bootstrap 2.3.2 .

Bootstrap 3 Beispiel

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

<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

Um die Paginierung in BS4 zu zentrieren, sollte justify-content-center in ul hinzugefügt werden:

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

Siehe Pagination Bootstrap 4 für weitere Informationen.

21
NoobTW

Die zuvor genannten Lösungen für Bootstrap 3.0 funktionierten für mich am 3.1.1 nicht. Die Paginierungsklasse hat display:block, und die <li>-Elemente haben float:left, was bedeutet, dass nur das Umschließen des <ul> in text-center alleine nicht funktioniert. Ich habe keine Ahnung, wie oder wann sich die Dinge zwischen 3.0 und 3.1.1 geändert haben. Jedenfalls musste ich <ul> stattdessen display:inline-block verwenden. Hier ist der Code:

<div class="text-center">
    <ul class="pagination" style="display:inline-block">
        <li><a href="...">...</a></li>
    </ul>
</div>

Wenn Sie ein saubereres Setup wünschen, lassen Sie das style-Attribut weg und setzen Sie es stattdessen in Ihr Stylesheet:

<style>
    .pagination {
        display: inline-block;
    }
</style>

Und dann das zuvor vorgeschlagene Markup verwenden:

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

Lösung für Bootstrap 4

Du kannst es benutzen Alignment Diese Klasse verwenden justify-content-center

Ändern Sie die Ausrichtung von Paginierungskomponenten mit den Dienstprogrammen flexbox .

und erfahren Sie mehr darüber Paginierung

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

Sie können Ihre benutzerdefinierte Css hinzufügen:

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

Vielen Dank

4
Ferhat KOÇER

Für mich geht das:

<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

Laravel mit Bootstrap 4, die Lösung, die funktioniert hat:

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

Das hier hat für mich funktioniert:

Stil :

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

.pagination li {
  display: block;
 }

Und Klinge :

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

In v4.0.0-alpha.6:

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

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> 
0
Eassa Nassar

Ich konnte keine der vorgeschlagenen Lösungen mit Bootstrap 4 alpha 6 verwenden, aber die folgende Variante brachte mir schließlich eine zentrierte Seitenleiste.

CSS überschreiben:

.pagination {
  display: inline-flex;
  margin: 0 auto;
}

HTML:

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

Keine andere Kombination von display, margin oder Klasse im Wrapping-Div schien zu funktionieren.

0
Emma Burrows

Diese CSS funktioniert für mich:

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