Wie zentriere ich schwebende Elemente?

354

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 -->
Erweitern Sie das Snippet

Um auf die Idee zu kommen, was ich will:

Alt-Text

css-float  center  css 
— Mike
quelle
Der gesamte Zweck der Eigenschaft float besteht darin, ein Element entlang der linken oder rechten Seite seines Containers zu positionieren.
— Rob
3
@Rob: Nun, ich musste Breite und Höhe für die Verknüpfungselemente definieren, was nur für Blockelemente möglich ist. Wenn Sie die Verknüpfungen jedoch blockieren, verteilen sie sich jeweils auf einer neuen Linie. Deshalb habe ich sie schwebend gemacht.
— Mike
Alternative Lösung, wenn Sie keinen Inline-Block verwenden möchten / können. stackoverflow.com/questions/1232096/…
— hakunin
1
Ich glaube, diese Frage verdient die Aufmerksamkeit des Moderators, da der aktuelle Titel und die Antworten irreführend sind. Die Frage betrifft nicht das Verschieben von Inhalten in der Mitte, sondern das Zentrieren von Inhalten. Floating bedeutet, dass der nicht schwebende Geschwisterinhalt die verbleibenden Lücken füllen sollte, und das ist hier eindeutig weder erwünscht noch erreicht.
— Tao
8
@AndreiGheorghiu Wenn du das denkst, schlage eine Bearbeitung vor, anstatt sie für Mods zu markieren. Jeder kann diese Fragen bearbeiten. Bearbeiten Sie die Frage und schreiben Sie eine ausführliche Erklärung in den Bearbeitungsgrund. Dies kann jeder Benutzer tun, es muss kein Moderator sein. Es ist nichts falsch an der Frage oder den Antworten, die ein Eingreifen des Moderators erfordern
— Zoe

Antworten:

406

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 +.)

Code-Snippet anzeigen

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.

— Arnaud Le Blanc
quelle
10
Tipp: Vergessen Sie nicht die vertikale Ausrichtung.
— Synexis
5
Ja, dies ist einer der wenigen Fälle, in denen die vertikale Ausrichtung tatsächlich das tut, was Sie erwarten.
— Mike Turley
4
Der Nachteil dieser Methode ist, dass es schwierig ist, den horizontalen Abstand zu steuern, da Leerzeichen zwischen Elementen auftreten können.
— Xavier Poinas
@XavierPoinas: Verwenden Sie die Schriftgröße: 0; auf die Eltern, um dieses Problem zu beheben
— Roelleor
Beachten Sie jedoch, dass "font-size: 0" auf Android-Geräten nicht funktioniert hat. Ich bin mir nicht sicher, ob dies für neuere Versionen noch gilt.
— Andreas Baumgart
150

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>
Erweitern Sie das Snippet

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.

— lukart
quelle
1
Eine Erinnerung daran, dass dies funktioniert, wenn nur ein einziges float-Element vorhanden ist.
— Wtower
Das Problem dabei ist, dass eine horizontale Bildlaufleiste angezeigt wird, da sich das äußere Div über den Bildschirm hinaus erstreckt. Auch wenn die Liste in eine andere Zeile umgebrochen wird, wird das Ganze nach links ausgerichtet.
— cleversprocket
Dies macht keinen Unterschied, ohne die maximale Breite des Containers margin: 0 auto;
— einzustellen.
1
Für mich float: left;war das am .main-containerund nicht nötig .fixer-container.
— csum
@cleversprocket Ich löste die horizontale Schriftrolle, indem ich alles in ein einziges div mitoverflow: hidden;
— csum
36

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

— romprzy
quelle
Anzeige: Tischtrick ist unglaublich, habe einfach alles so gemacht, wie es sein sollte, mit nur wenigen Zeilen. Daran muss ich mich erinnern. Prost
— Kilop
Die Inline-Block-Technik funktioniert sehr gut. Glücklicherweise können die Elemente, für die ich dies verwende (verschachtelte div-Elemente), die Lücke gut bewältigen.
— Karolus
Sie können die Inline-Block-Lücken auch entfernen, indem Sie die Schriftgröße auf Null setzen und dann Ihren vorherigen Wert innerhalb der untergeordneten Elemente wiederherstellen
— Mike Causer
15

Stellen Sie Ihren Container widthin pxund fügt:

margin: 0 auto;

Referenz .

— Barney
quelle
1
Für mich ist dies die beste Antwort: P.
— Alansiqueira27
3
Dies würde nur funktionieren, wenn die Containerbreite angemessen ist. Dies ist das Problem, wenn es schwebende Elemente enthält.
— Wtower
11

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 -->
Erweitern Sie das Snippet

— Santosh Khalse
quelle
5

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

— Tarod
quelle
1
Funktioniert nur mit Rand: auto; anstelle der individuellen linken und rechten Eigenschaften auch.
— Cellepo
2

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

display:inline;
zoom: 1;
— Krisada Art
quelle
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.

— 11-
quelle
1

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 -->
Erweitern Sie das Snippet

— mwag
quelle
0 
<!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.

— Noel Jose
quelle
-1

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

— user3085662
quelle
4
15% sind einfach willkürlich.
— Wtower
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.