Ich implementiere die Paginierung und sie muss zentriert werden. Das Problem ist, dass die Links als Block angezeigt werden müssen, sodass sie verschoben werden müssen. Aber dann text-align: center;funktioniert es nicht. Ich könnte es erreichen, indem ich das Wrapper-Div-Padding von links gebe, aber jede Seite hat eine andere Anzahl von Seiten, so dass das nicht funktionieren würde. Hier ist mein Code:

.pagination {
  text-align: center;
}
.pagination a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}

<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->

Um auf die Idee zu kommen, was ich will:

Das Entfernen floatund Verwenden von s inline-blockkann Ihre Probleme beheben:

 .pagination a {
-    display: block;
+    display: inline-block;
     width: 30px;
     height: 30px;
-    float: left;
     margin-left: 3px;
     background: url(/images/structure/pagination-button.png);
 }

(Entfernen Sie die Zeilen, die mit beginnen, -und fügen Sie die Zeilen hinzu, die mit beginnen +.)

.pagination {
  text-align: center;
}
.pagination a {
  + display: inline-block;
  width: 30px;
  height: 30px;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}

<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->

inline-block Funktioniert browserübergreifend, auch unter IE6, solange das Element ursprünglich ein Inline-Element ist.

Zitat aus dem Quirksmode :

Ein Inline-Block wird inline platziert (dh in derselben Zeile wie benachbarter Inhalt), verhält sich jedoch wie ein Block.

Dies kann Schwimmer oft effektiv ersetzen:

Die tatsächliche Verwendung dieses Werts ist, wenn Sie einem Inline-Element eine Breite geben möchten. Unter bestimmten Umständen erlauben einige Browser keine Breite für ein echtes Inline-Element, aber wenn Sie zur Anzeige wechseln: Inline-Block, können Sie eine Breite festlegen. “ ( http://www.quirksmode.org/css/display.html#inlineblock ).

Aus der W3C-Spezifikation :

[Inline-Block] bewirkt, dass ein Element einen Blockcontainer auf Inline-Ebene generiert. Das Innere eines Inline-Blocks wird als Blockbox formatiert, und das Element selbst wird als atomare Inline-Level-Box formatiert.

Seit vielen Jahren verwende ich einen alten Trick, den ich in einem Blog gelernt habe. Es tut mir leid, dass ich mich nicht an den Namen erinnere, um ihm Credits zu geben.

Auf jeden Fall sollte dies funktionieren, um schwebende Elemente zu zentrieren:

Sie benötigen eine Struktur wie diese:

    .main-container {
      float: left;
      position: relative;
      left: 50%;
    }
    .fixer-container {
      float: left;
      position: relative;
      left: -50%;
    }

<div class="main-container">
  <div class="fixer-container">
    <ul class="list-of-floating-elements">

      <li class="floated">Floated element</li>
      <li class="floated">Floated element</li>
      <li class="floated">Floated element</li>

    </ul>
  </div>
</div>

Der Trick besteht darin, Float nach links zu geben, damit die Container die Breite je nach Inhalt ändern. Dann ist es eine Frage der Position: relativ und belassen 50% und -50% auf den beiden Containern.

Das Gute ist, dass dies browserübergreifend ist und ab IE7 + funktionieren sollte.

Das Zentrieren von Schwimmern ist einfach . Verwenden Sie einfach den Stil für Container:

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

Ändern Sie den Rand für schwebende Elemente:

.pagination a{ margin: 0 2px; }

oder

.pagination a{ margin-left: 3px; }
.pagination a.first{ margin-left: 0; } 

und lass den Rest so wie er ist.

Es ist die beste Lösung für mich, Dinge wie Menüs oder Paginierung anzuzeigen.

Stärken:

• Cross-Browser für alle Elemente (Blöcke, Listenelemente usw.)

• Einfachheit

Schwächen:

• Dies funktioniert nur, wenn sich alle schwebenden Elemente in einer Zeile befinden (was normalerweise für Menüs, aber nicht für Galerien in Ordnung ist).

@ arnaud576875 Die Verwendung von Inline-Block- Elementen funktioniert in diesem Fall hervorragend (browserübergreifend), da die Paginierung nur Anker (Inline), keine Listenelemente oder Divs enthält:

Stärken:

• funktioniert für mehrzeilige Elemente.

Weknesses:

• Lücken zwischen Inline-Block-Elementen - es funktioniert genauso wie ein Leerzeichen zwischen Wörtern. Dies kann zu Problemen bei der Berechnung der Breite des Containers und der Styling-Ränder führen. Die Lückenbreite ist nicht konstant, aber browserspezifisch (4-5px). Um diese Lücken zu schließen, würde ich den Code von arnaud576875 hinzufügen (nicht vollständig getestet):

  .pagination {Wortabstand: -1em; }}

  .pagination a {Wortabstand: .1em; }}

• In IE6 / 7 funktioniert dies bei Block- und Listenelementelementen nicht

Stellen Sie Ihren Container widthin pxund fügt:

margin: 0 auto;

Referenz .

Verwenden von Flex

.pagination {
  text-align: center;
  display:flex;
  justify-content:center;
}
.pagination a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}

<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->

Ich denke, der beste Weg ist, marginstatt zu verwenden display.

Dh:

.pagination a {
    margin-left: auto;
    margin-right: auto;
    width: 30px;
    height: 30px;    
    background: url(/images/structure/pagination-button.png);
}

Überprüfen Sie das Ergebnis und den Code:

http://cssdeck.com/labs/d9d6ydif

text-align: center;
float: none;

IE7 weiß es nicht inline-block. Sie müssen hinzufügen:

display:inline;
zoom: 1;

Fügen Sie dies Ihrem Styling hinzu

position:relative;
float: left;
left: calc(50% - *half your container length here);

* Wenn Ihre Containerbreite 50px beträgt, setzen Sie 25px, wenn es 10em ist, setzen Sie 5em.

Sie können dies auch tun, .paginationindem Sie "text-align: center" durch zwei bis drei Zeilen CSS für left, transform und je nach den Umständen positionieren.

.pagination {
  left: 50%; /* left-align your element to center */
  transform: translateX(-50%); /* offset left by half the width of your element */
  position: absolute; /* use or dont' use depending on element parent */
}
.pagination a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}

<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->

<!DOCTYPE html>
<html>
<head>
    <title>float object center</title>
    <style type="text/css">
#warp{
    width:500px;
    margin:auto;
}
.ser{
width: 200px;
background-color: #ffffff;
display: block;
float: left;
margin-right: 50px;
}
.inim{
    width: 120px;
    margin-left: 40px;
}

    </style>
</head>
<body>



<div id="warp">
            <div class="ser">
              <img class="inim" src="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">

              </div>
           <div class="ser">
             <img class="inim" sr`enter code here`c="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">

             </div>
        </div>

</body>
</html>

Schritt 1

Erstellen Sie zwei oder mehr Divs, die Sie möchten, und geben Sie ihnen eine bestimmte Breite wie 100 Pixel für jedes Div. Schweben Sie sie dann nach links oder rechts

Schritt 2

Verziehen Sie dann diese beiden Divs in einem anderen Div und geben Sie ihm die Breite von 200px. auf diese div Marge automatisch anwenden. Boom es funktioniert ziemlich gut. Überprüfen Sie das obige Beispiel.

Einfach hinzufügen

left:15%; 

in mein CSS-Menü von

#menu li {
float: left;
position:relative;
left: 15%;
list-style:none;
}

hat auch den Zentriertrick gemacht