Faking ‘float: center’ mit Pseudo-Elementen

Nehmen wir an, Sie möchten ein Layout wie dieses erstellen

Das ist doch vernünftig, oder? Besonders, wenn Ihr Artikel davon handelt, dass Katzen im MITTELPUNKT der Aufmerksamkeit stehen wollen. VERSTEHEN SIE?! (Kätzchen via PlaceKitten).

Nun, das ist nicht gerade einfach zu bewerkstelligen. Unsere aktuellen Layout-Methoden sind nicht wirklich darauf ausgelegt. Tatsächlich fühlen sie sich manchmal so an, als hätten sie "Webdesign" nicht wirklich im Sinn. HAB ICH RECHT? Selbst die fortschrittlichsten CSS-Layoutsysteme, glaube ich, würden das nicht gut handhaben. Das ist ein bisschen so wie bei float, wo der Text um das Bild herumfließt, aber der Text fließt in beide Richtungen, also wäre es so etwas wie float: center; oder float: both;, was nicht existiert.

Aber das ist machbar! Beweis

Demo ansehen   Dateien herunterladen

Wir werden dies tun, indem wir geflutete Pseudo-Element-Platzhalter verwenden. Wir werden einen in jeder Textspalte platzieren¹, einen links, einen rechts geflutet. Das Pseudo-Element sollte die Höhe des Bildes haben und die halbe Breite (ungefähr... denken Sie daran, dass Sie etwas Polsterung benötigen und der Abstand zu berücksichtigen ist).

Im Wesentlichen

#l:before, #r:before { 
  content: ""; 
  width: 125px; 
  height: 250px; 
}
#l:before { 
  float: right; 
}
#r:before { 
  float: left; 
}

Jetzt gibt es ein Loch im Text, bereit, unser Bild dort zu platzieren. Wir könnten dies tun, indem wir es absolut positionieren, wie in der Demo. Oder Sie könnten es einfach in einem Element darüber belassen, zentriert, und negative obere Ränder an den Spalten verwenden, um den Text herumzuziehen.

---

¹ Beachten Sie, dass wir div's für die Textspalten verwenden, nicht CSS-Spalten, was cooler und semantischer wäre, aber es wird nicht passieren.