Vertikale Zentrierubg von Bild und Text

[Winnie]

Hallo liebe HTML-Gemeinde,
wie kann ich einen Text neben einem Bild mittig zum Bild zentrieren?

XXXXXXXX
XXXXXXXX
XXXXXXXX .. Text
XXXXXXXX
XXXXXXXX

[Rolf B]

Hallo Winnie,

ein Ansatz wäre Flexbox mit align-items:center;

Vielleicht hilft Dir auch der Wiki-Artikel Inhalte zentrieren weiter.

Rolf

[Gunnar Bittersmann]

@@Rolf B

ein Ansatz wäre Flexbox mit align-items:center;

Ja, aber nicht nur. Man sollte sich Gedanken machen, wie es denn aussehen soll, wenn der Text mehr Höhe einnimmt als das Bild. Soll dann das Bild mittig sein?

Ich denke, nein. Oben ist besser. So hab ich’s bei den Springsteen-Alben gemacht.

Und da stecken dann auch noch Gedanken drin, wie’s denn auf schmalen und ganz schmalen Viewports aussehen soll: Text fließt ums Bild bzw. Text unterm Bild.

Jolan tru

[Matthias Scharwies]

Servus!

Hallo liebe HTML-Gemeinde,
wie kann ich einen Text neben einem Bild mittig zum Bild zentrieren?

Rolfs Tipp sind gut - hier ist ein Beispiel in

• Bilder_im_Internet/Bilder_präsentieren

(Das wurde glaub' ich schon mal gefragt, obwohl ich Bilder nie so anordnen würde. Evtl. im Wechsel links-rechts.)

Herzliche Grüße

Matthias Scharwies

[Winnie]

Danke Euch,

es ist nur ein relativ kurzer, einzeiliger Text. Ich habe es mit flex versucht und auf meinen PC sieht es gut aus.

Kann ich den Text (und evtl. auch das Bild) am Smartphone etwas kleiner darstellen?

[Rolf B]

Hallo Winnie,

die Bedingung

am Smartphone

ist etwas, was Du nicht abfragen kannst. Du kannst @media-Abfragen auf bestimmte Viewportbreiten machen (also Bildschirmbreite bzw. Fensterbreite).

Damit das funktioniert, ist eine Viewportangabe, wie das Wiki sie im Grundgerüst einer HTML Seite darstellt, wichtig. Andernfalls skalieren die Handybrowser die Darstellung so, dass die Website glaubt, sie hätte einen 960px breiten Bildschirm.

Mit der Viewportangabe teilst Du dem Browser mit: Ich weiß, wie ich mit kleinen Viewports richtig umgehen muss.

Die nächste Handy-Besonderheit^[1] ist, dass 1px im CSS nicht ein Gerätepixel ist. Klassische Desktops haben knapp 100 Punkte pro Zoll (96 dpi), moderne Handy haben 400dpi oder mehr. Damit Pixelangaben nicht zu Mikrobildern führen, werden CSS-Pixel entsprechend einem Gerätepixel-Umrechnungsfaktor (devicepixel-ratio) umgerechnet. Dein Handy mit einer Höllenauflösung von 2000×3500 erscheint für CSS damit immer noch wie 320x560.

Aber du kannst es von einem Desktop-Browser, dessen Fenster auf ganz klein eingestellt wurde, immer noch nicht unterscheiden.

Und du solltest auch nicht auf px abfragen. Der Browser hat eine Standardschriftart, deren Größe vom Benutzer in den Einstellungen festgelegt werden kann. Oft sind es 16px, aber dafür gibt's keine Garantie. Als Näherungswert ist das trotzdem tauglich. Wenn Du "unter 320 CSS Pixel Bildschirmbreite" als Auslöser für Handy-Darstellung haben willst, kannst Du eine @media-Abfrage auf 20em machen. 1em ist identisch mit der Standard-Schriftgröße des Browsers.

Und, ach ja, du solltest andersrum abfragen. Es ist oft leichter, eine Webseite von schmaler Darstellung per CSS auf breite Darstellung umzumodeln als andersrum.

Die Abfrage an sich geht so:

@media (width >= 20em) {
   img {
   }
}

Ein solcher @media-Block enthält CSS Regeln, die nur dann gelten, wenn die angegebene Bedingung erfüllt ist. Es gibt diverse Arten, wie man sowas formulieren kann – Gunnar hat in seinem Codepen einige Komplikationen drin, und ich muss peinlich lange nachdenken, bis ich weiß, was mit 20 <= width gemeint ist. width >= 20em verstehe ich hingegen sofort.

Das kannst Du dann nutzen, um entweder Regeln zu "stapeln", d.h. je breiter es wird, desto mehr Regeln kommen hinzu und überschreiben die Regeln für schmalere Viewports, oder Du verwendest Bereichsabfragen:

@media (10em < width <= 20em) {
   ...
}
@media (20em < width <= 40em) {
   ...
}
@media (width > 40em) {
   ...
}

Achte nur darauf, dass Du (a) keine Lücken hast und (b) keine Überlappungen. Würde bei der letzten Abfrage beispielsweise width >= 40em stehen, dann würden bei genau 40em beide Abschnitte gelten.

Auf diese Weise kannst Du deine Darstellung an die Viewportbreite anpassen.

Rolf

---

1. Nicht nur dort. Die Pixelmonster unter den Desktop-Bildschirmen mit ihrer „Retina“-Auflösung haben das gleiche Problem zu lösen ↩︎

[Gunnar Bittersmann]

@@Rolf B

Dein Handy mit einer Höllenauflösung von 2000×3500 erscheint für CSS damit immer noch wie 320x560.

Aber du kannst es von einem Desktop-Browser, dessen Fenster auf ganz klein eingestellt wurde, immer noch nicht unterscheiden.

Und von einem Desktop-Browser, dessen Fenster „normal“ groß ist, worin aber gezoomt wurde^[1], auch nicht.

Jolan tru

---

1. einige Male [cmd][+] bzw. [ctrl][+] für die armen Leute ohne [cmd]-Taste ↩︎

[Gunnar Bittersmann]

@@Winnie

es ist nur ein relativ kurzer, einzeiliger Text.

Bei dir. Bei anderen, die in ihrem Browser eine größere Schrift eingestellt haben, ist der Text womöglich mehrzeilig.

Außerdem haben Texte die Eigenart, irgendwann geändert zu werden. Das wirst du vermutlich nicht morgen tun. Aber vielleicht nächste Woche, und dann hast du schon wieder vergessen, dass ein längerer Text dir das Layout zerschießt.

Am besten ist, man macht erst gar keine Annahme, dass Text einzeilig wäre, sondern bedenkt gleich, was passieren soll, wenn er mehrzeilig ist.

Jolan tru