Eine Frage an die CSS-Profis - Text soll immer mittig zu gefloatetem Bild sein

[Kasey]

Eine Kundin hat einen ungewöhnlichen Wunsch. Sie möchte links Bilder und rechts den Text. Zu jedem Bild (etwa 10) gibt es einen Text der unterschiedlich lang ist. Nun soll nicht etwa das Bild oben mit dem Text bündig sein, nein der Text soll immer in der Mitte des Bildes sein. Ist das überhaupt möglich? Das Bild wird nach links gefloatet, aber da der Text immer unterschiedlich lang ist und je nach Ausgabegerät (soll natürlich auch responsiv sein) wie kann ich da Angaben machen. Im Float ist das Bild ja ausserhalb der normalen Positionierung. Habe mich schon dumm und dämmlich gegoogelt, aber nichts gefunden. Hat jemand einen Idee?

Schon im Voraus vielen Dank.

[Bas]

http://css-tricks.com/vertically-cen...ti-lined-text/
oder
http://www.vanseodesign.com/css/vertical-centering/

Bitteschön.

[Kasey]

Ich glaube ich habe mich missverständlich ausgedrückt, so sollte es aussehen:

bilder.jpg

[Kahmoon]

Meines wissens nach geht das nur innerhalb von Tabellenzellen mit vertical-align bzw. valign="middle".

Beispiel:
http://de.selfhtml.org/html/tabellen...ign_valign.htm

Erklärung:
http://de.selfhtml.org/html/tabellen...ichtung_zellen

VG

[Kasey]

Das dachte ich auch, wollte nur sichergehen, dass mir da nicht etwas entgangen ist. Vielen Dank für die Unterstützung.

[tab]

Kommt drauf an, wie das HTML dazu aussieht, bzw welche Vorgaben es dazu gibt

[Kasey]

Ist eine Contao-Seite, leider noch nicht online, deshalb kann ich keinen Link aufschalten. Es sollte danach auch super einfach zum Betreuen sein. An was hast Du denn gedacht? Zusätzliche divs?

[tab]

Naja, zumindest vielleicht nicht gerade an ein Textelement mit Titel und Bild.

[cne]

Es sollte danach auch super einfach zum Betreuen sein. An was hast Du denn gedacht? Zusätzliche divs?

Dann solltest du eher ein eigenes Content-Element erstellen (Element Generator), das du per CSS stylen kannst und das eben nur die Felder Bild-Auswahl und Text enthält.

[uwe]

Mit der zweiten Linkempfehlung von Bas kann man so eine Darstellung hinkriegen:
http://www.vanseodesign.com/css/vertical-centering/

Mit der "CSS Table Method", schöne Sache.

[Kasey]

Das ist eine super Sache, habe ich auch gelesen, entfällt aber leider da es für die Kundin danach zu kompliziert wird den Text und Bilder selbst zu ändern. Sie findet den Umgang mit Contao schon so sehr kompliziert....

[tab]

Um es möglichst einfach für die Kundin zu machen, gefällt mir eigentlich die Idee mit dem Inhaltselement am besten. Da kann sie am wenigsten falsch machen. Bei einer reinen CSS-Lösung wird man eben auch immer das dazu passende HTML voraussetzen müssen. Wenn sie also Bild und Text mal versehentlich anders erzeugt als vorgesehen, dann wird es mit hoher Wahrscheinlichkeit in die Hose gehen.

[andreasisaak]

Was spricht dagegen einfach kein floating zu verwenden und das ganze mit display:inline-block und vertical-align:middle umzusetzen?