Felix Riesterer: "schwebende" DIVs (float) ausrichten

Beitrag lesen

Lieber Julian,

"Zentriert floaten" <-- ein sehr schöner Kunstbegriff

da kommt mir eine Idee. Stelle Dir vor, Du definierst per CSS eine Klasse, die Bildern großzügige Ränder spendiert, so dass die Bilder in einem Absatz fortlaufend notiert, in ebenmäßigen Abständen zueinander stehen. Diesen Absatz formatierst Du zentriert.

Durch den zentrierten Textabsatz haben die Bilderzeilen rechts und links denselben Abstand zum Rand. Bei n Bildern immer. Auch wenn in der letzten Zeile nicht mehr n Bilder angezeigt werden, so werden doch die vorhandenen Bilder quasi mittig ausgerichtet!

Skizze:
 +----------------------------+
 |           Seite            |
 |   +--+  +--+  +--+  +--+   | Die Bilder haben per margin
 |   |  |  |  |  |  |  |  |   | zwischen einander sinnvolle
 |   +--+  +--+  +--+  +--+   | Abstände.
 |   +--+  +--+  +--+  +--+   |
 |   |  |  |  |  |  |  |  |   | Die Bilder-Zeilen sind zentriert ausgerichtet.
 |   +--+  +--+  +--+  +--+   |
 |      +--+  +--+  +--+      | Daher stehen die Bilder der letzten Zeile
 |      |  |  |  |  |  |      | auch "zentriert", obwohl es weniger sind.
 |      +--+  +--+  +--+      | Übrigens alles ohne float!
 +----------------------------+

Wenn Du zu den Bildern gerne noch Bildunter- oder -überschriften haben möchtest, dann kannst Du ja kleine Tabellen notieren, in deren zwei Zeilen Bild und zugehöriger Text stehen. <table> mit display: inline verhält sich in einem großen <div> ähnlich, wie <img>s in einem <p>.

Wäre das etwas für Dich?

Liebe Grüße aus Ellwangen,

Felix Riesterer.