Center float-Boxen horizontal

Möchte ich einige anzeigen floating-Boxen (divs mit thumbnails) und die Anzahl der Bilder hängt von der aktuellen Seitengröße. Zum Beispiel:

<div class="container">
  <div class="box1" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
  <div class="box2" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
  <div class="box3" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
  <div class="box4" style="float:left;width:120px;height:120px;margin-right:10px;">Thumbnail image here</div>
    .......... ETC
</div>

das problem ist, dass für eine gegebene Breite zeigt es zum Beispiel 4 Boxen in jeder Zeile, aber Sie sind alle Links ausgerichtet, und es gibt einige weißen Raum auf der rechten Seite, wie kann ich den center horizontal für jede Zeile??

Etwas wie dieses: http://realworldstyle.com/thumbs_3.html aber mit Boxen horizontal zentriert auf der Seite...

vielen Dank im Voraus,

InformationsquelleAutor fidoboy | 2009-12-04

3

Sorry, aber nicht in der Lage zu tun, was Sie wollen, gerade mit CSS + HTML. (Werfen Sie einen Blick auf @Pekka für eine alternative, obwohl, wenn die Reihe von miniaturen nicht füllen Sie die gesamte Zeile, würden Sie zentriert werden, indem Sie sich auf die Letzte Zeile),

Würden Sie brauchen, um eine Feste Breite, die auf das übergeordnete Objekt .container mit margin-left: auto und margin-right:auto was du nicht machen, weil es ist eine Flüssigkeit, die Breite Seite.

Hier ist, wie ich gehen würde, es zu tun, obwohl es sicher ein paar bugs, die Sie benötigen, zu umgehen:
1. Binden ein javascript-event an den window.resize Veranstaltung
2. Holen Sie sich das neue Dokument Breite und sehen Sie, wie viele thumbnails passen würde auf eine Zeile
3. Legen Sie die Breite der div.container werden, dass die Breite plus die wenig Marge auf der rechten Seite. Diese div immer ein margin-left und margin-right von auto
Dies zentriert die miniaturen so gut wie möglich. Je nach Ihrer visuellen anzeigen, benötigen Sie möglicherweise eine zusätzliche Umhüllung div um die 100% width hintergrund.
- Ok, denke, dass dies könnte die einfachste Lösung sein, ich allerdings, dass ich lösen konnte dies nur mit CSS, aber es scheint, dass werde ich brauchen, um die Verwendung von javascript auch...
- Können die downvoter die Zeit nehmen, um hilfreiche Rückmeldungen, so kann ich meine Antwort besser?
- Fantastisch! Ich habe es gelöst mit Hilfe von jQuery und jetzt funktioniert es... Vielen Dank dcneiner!!
- Kein downvote von mir, aber genau das gleiche würde ich vorschlagen, css für den Browser, die es unterstützen und Nutzung der javascript-Code wird nur wickeln Sie den container in einer Tabelle für den IE. So dass Sie nicht haben, um mit Mühe die Größe stuff.
- Mein einzige problem mit den anderen Lösungen ist, dass Sie brechen würde das raster. Durch die Zentrierung alles text-align: center die Letzte Zeile würde nicht in ein raster mit den vorherigen Zeilen. Seit der OP genannten "thumbnails" ich nahm an, es war etwas, auf das ein konsistentes raster ist wichtig.
- Thats true, wenn Sie die inline-block-Zeug an die Boxen, nicht, wenn Sie es anwenden .container.
- Ah, natürlich! Nicht darüber nachdenken. Guter Punkt.
- Ich hasse downvotes ohne Begründung...
- danke für den support Jungs. Ich bin froh zu erfahren, wenn Menschen sich die Zeit nehmen, zu sagen, warum Sie downvoted. Naja.
- Die Frage ist, warum hat Sie dieser Website erlauben, downvoting, ohne eine Erklärung? Und das tun die Designer von dieser Website-Pflege über Ihre Nutzer?
- Ja, Sie kümmern sich um Ihre Nutzer. Wie, warum downvotes ohne Kommentare erlaubt sind, suchen Sie bitte für dass Thema auf meta.stackoverflow.com.
InformationsquelleAutor Doug Neiner
7

Ich denke, der einzige Weg, um die Elemente zentriert ist, arbeiten nicht mit float, sondern die Einstellung der Bilder display: inline. Auf diese Weise können Sie ausrichten, dass Sie am Willen mit dem übergeordneten container text-align Eigenschaft.

Aber das wird Ihnen zusätzliche Probleme mit vertikalen Ränder und Einstellung der Höhe. Aber soweit ich weiß, ist es die einzige zuverlässige cross-browser-solange inline-block ist nicht weitgehend unterstützt werden.
- Ich denke, die Frage macht klar, warum dein Update nicht funktionieren würde.
- Point taken, Lesen zu schnell. Wird Bearbeiten.
- Ich habe bearbeitet Sie meine Frage hinzufügen ein Beispiel zum besseren Verständnis...
- SO mag mich nicht 🙂 Es wird nicht lassen Sie mich wieder meinem unten Stimmen. Ist es möglich, die Sie durchführen können, eine mehr Bearbeiten ?
- Getan! 🙂 ---------
- +1 Für die tolle Antwort, nicht darüber nachdenken. Die Letzte Zeile der Daumen würde nicht in ein raster.. ich Frage mich, ob das ankommt.
InformationsquelleAutor Pekka supports GoFundMonica
2

Verwenden Sie eine unsortierte Liste mit den inline-Elemente auflisten:

HTML:
```
<ul>
    <li><img src="image1.jpg" /></li>
    <li><img src="image2.jpg" /></li>
    <li><img src="image3.jpg" /></li>
    <li><img src="image4.jpg" /></li>
</ul>
```
CSS:
```
ul {
    width: 960px;
    text-align: center;
}

ul li {
    display: inline;
}
```
Dass Sie tun, solange Sie nicht auf block-level-Elemente innerhalb der LI-Elemente. Funktioniert auch, wenn Sie mehr als eine Reihe von Bildern 😉 kann Man auch div ' s aber eine Liste ist semantisch noch viel schöner.
- Das funktioniert nicht, weil Sie eine Feste mit (960px) in deinem Beispiel....
- Die Breite ist nicht nötig, für sein Beispiel funktioniert, aber wenn es 6 Elemente pro Zeile und 3 auf den letzten. Die letzten 3 würde zentriert und nicht in übereinstimmung mit den vorherigen Zeilen.
InformationsquelleAutor Tatu Ulmanen
1

inline-block und auto-Margen auf .container sollten den trick tun für die meisten Browser mit vielleicht text-align:center auf den Körper als auch.

Und wenn IE6 und IE7 spielen nicht schön, Sie können immer mit javascript /jquery wickeln Sie das ganze in eine Tabelle nur für Sie.

Wohlgemerkt, ich würde es nicht Wagen deuten auf eine Tisch-Lösung für normale Browser, obwohl es offensichtlich funktioniert einwandfrei 😉

InformationsquelleAutor jeroen
0

Style margin: 0 auto; zentrieren Sie das element. Aber Sie müssen geben Sie die Breite des übergeordneten Containers.
```
<div style="width:100%; float:left; margin: 0 auto;">
   /* Your Child Elements */
</div>
```
InformationsquelleAutor Nalan Madheswaran

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.