Umfließenden Text vertikal mittig zentrieren bei Bedarf

[Thomasge]

Hallo zusammen,

Ich bin auf der Suche nach einer Möglichkeit wie man die nachfolgende Problematik mit Contao bzw. CSS bewerkstelligen kann, oder dies vielleicht aus bestimmten Gründen erst gar nicht zu realisieren ist.

Ich habe eine Webseite mit bis zu 3 Grafiken (je nach Bedarf 1, 2 oder 3 Grafiken) bei denen umfließender Text eingebunden ist. Diese Grafiken und Texte werden in regelmäßigen Abständen ausgetauscht und dabei kann es dann auch vorkommen, dass der eine oder andere Text mal eine geringere Höhe hat als die Grafik selbst. Diese Texte sollten dann vertikal mittig zur Grafik zentriert sein und nicht auf der gleichen Höhe wie die Grafik beginnen. Ich kann zwar separate Formatierungen in CSS vornehmen was aber jedesmal in CSS geändert werden müsste wenn der Text länger oder kürzer ist. Alternativ kann man auch zusätzliche Artikel mit dieser Formatierung einfügen und jeweils den entsprechenden Artikel dafür hernehmen.

Was dann beim Einsatz von Media Queries sehr aufwendig werden würde, bei mir mit 6 Brakpoints wären es über eine Realisierung mit Artikeln pro Grafik mit Text 7 verschiedene Artikel mit entsprechender Definition in CSS. Da aber häufig nicht nur eine Grafik mit Text auf der Webseite eingebunden wird sondern es bis zu 3 Grafiken mit Text sein können würde sich dadurch die Anzahl der Artikel von jetzt 3 auf 21 erhöhen, weil jeder Artikel 3x vorgehalten werden müsste. Bei den CSS Definitionen wären es dann von jetzt einem auf 7 mit jeweils 6 Media Queries.

Meine Vorstellung wäre eine gemeinsame CSS Formatierung bei der bei langem Text die Grafik umflossen wird und bei kurzem Text dieser vertikal mittig neben der Grafik positioniert ist, ohne eine Veränderung an der CSS und zusätzlichen Artikeln. Somit wäre nur 1 Artikel pro Grafik und Text notwendig und auch nur 1 CSS Definition pro Media Querie.
Gübt es solch eine Methode oder Möglichkeit mit der man dies realisieren könnte?
Danke!


Gruß
Thomas

[Nightwing]

Da würde Flexbox per CSS gut passen: https://www.on-design.de/tutor/html5...3/flexbox.html

ToM