Wie kann ich center float-Elemente?

Entfernen floats, und mit inline-block beheben Ihre Probleme:

 .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, beginnend mit - und fügen Sie die Zeilen beginnend mit +.)

CSS:

.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);
}

HTML:

<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 cross-browser, auch auf IE6, solange das element ist ursprünglich ein inline-element.

Zitat von quirksmode:

Inline-block platziert wird inline (ie. auf der gleichen Linie wie die angrenzenden Inhalt), aber es verhält sich wie ein block.

diese oft wirksam ersetzen kann schwimmt:

Die Reale Nutzung dieser Wert ist, wenn Sie geben wollen, ein inline-element eine Breite. In einigen Fällen einige Browser erlauben es nicht, eine Breite auf ein echtes inline-element, aber wenn Sie mit dem Schalter display: inline-block dürfen Sie eine Breite." ( http://www.quirksmode.org/css/display.html#inlineblock ).

Aus der W3C-spec:

[inline-block] bewirkt, dass ein element zum generieren einer inline-level block-container. Die Innenseite der inline-block formatiert als block-box, und das element selbst ist formatiert als eine Atomare inline-level-box.

Zentrierung schwimmt ist einfach. Verwenden Sie einfach den Stil für container:

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

ändern Sie die Marge für floating-Elemente:

.pagination a{ margin: 0 2px; }

oder

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

und lasse den rest wie er ist.

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

Stärken:

• cross-browser für alle Elemente (Blöcke, Listen-Elemente etc.)

• Einfachheit

Schwächen:

• es funktioniert nur, wenn alle bewegliche Elemente in einer Linie stehen (das ist normalerweise ok für die Menüs, aber nicht für die Galerien).

@arnaud576875 Mit inline-block Elemente gut funktionieren wird (cross-browser), in diesem Fall die Paginierung enthält nur Anker (inline), keine Liste-Elemente oder divs:

Stärken:

• Werke für mehrzeilige Einträge.

Weknesses:

• Lücken zwischen inline-block-Elemente - es funktioniert auf die gleiche Weise wie ein Leerzeichen zwischen den Wörtern. Es kann dazu führen, dass einige Probleme der Berechnung der Breite des container-und styling-Margen. Lücken, die Breite nicht konstant ist, aber es ist browser-spezifisch (4-5px).
  Um loszuwerden, diese Lücken möchte ich hinzufügen arnaud576875 code (nicht vollständig getestet):

  .Paginierung{ word-spacing: -1em; }

  .pagination a{ word-spacing: .1em; }

• es funktioniert nicht in IE6/7 auf block und list-Elemente Elemente

Mit Flex

CSS:

.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);
}

HTML:

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

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

display:inline;
zoom: 1;

Fügen Sie diese, um Ihr styling

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

*Wenn Ihr container die Breite von 50px 25px setzen, wenn es 10em setzen 5em.

<!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 mehrere div ' s, die Sie möchten, und geben Sie eine bestimmte Breite wie 100px für jeden treiben dann nach Links oder rechts

Schritt 2

dann warp diese beiden DIVS in einem weiteren div-Element und geben Sie die Breite von 200px. dieser div anwenden, Marge auto.
boom es funktioniert ziemlich gut. überprüfen Sie den obigen Beispiel.