Hallo zusammen,
ich habe ein kleines Problem:
Auf einer HP habe ich oben ein Bild, welches ein Verhältnis von 16/3 hat und mit width:100% ganz oben auf der Seite platziert ist.
Ich würde gerne eine Schrift genau in die Mitte darüber legen.
Leider schaffe ich es nicht, die Schrift von oben exakt in die Mitte des Bilds zu legen, weil als Ausgangspunkt mit margin, padding etc. immer die Schriftränder genommen werden und nicht die Mitte der Schrift.
Hat jemand eine Ahnung wie ich das sonst verwirklichen könnte?
Ich hoffe, ich habe es verständlich beschrieben.

mfg,
Dominik

Was hast du denn probiert?

Hallo

Ich befürchte leider nicht.

Das aktuelle Vorgehen dazu ist, das img-Element mit dem Bild und das figcaption-Element mit dem Text in ein figure-Element zu schreiben. Per CSS mittels Flexbox wird der Text dann über dem Bild angezeigt und per text-align mittig ausgerichtet.

HTML:

CSS:

Und ein Beispiel direkt zum Ausprobieren:

Text über Bild

Nachtrag: Wie Killerbear schrieb habe ich die Frage wohl falsch verstanden - Diesen Beitrag also bitte vergessen. Ich lasse ihn bestehen damit Killerbears Beitrag nicht aus dem Zusammenhang gerissen wird. Mein Online-Beispiel habe ich aber korrigiert.

Gruss

MrMurphy

ich glaube themrdomi möchte nicht, dass der Text über dem Bild steht, sondern auf dem Bild.

Also mittig im Bild.

Wie sieht denn dein aktueller Code dazu aus?

Eine Möglichkeit wäre das Bild per Hintergrundgrafik zu laden und den Text dann drüber zu legen.
Beispiel:
A Pen by Killerbear

Hallo

Stimmt, ich habe themrdomis Problem wohl falsch verstanden.

Deshalb habe ich meine Online-Beispiel angepasst und dort drei mögliche Lösungen erstellt, da die Beschreibung von themrdomis nicht eindeutig ist. Zum Beispiel um wie viel Text es sich überhaupt handelt. Ein Wort? Ein kurzer Satz? Mehrere Absätze?

Wegen der Angabe des Bildverhältnisses bin ich davon ausgegangen, das das Bild bei jeder Fensterbreite möglichst komplett sichbar sein soll. Das Bild passt sich also der Fensterbreite an.

Bei der Einbindung als vollflächiges Hintergrundbild können am Rand immer ein paar Pixel verlorengehen, da der umgebende Container nicht direkt auf ein Hintergrundbild reagieren kann. Das sollte aber keine Rolle spielen. Andernfalls könnte das Bild etwas verzerrt werden, was aber auch nicht sichtbar sein wird.

Für sehr schmale Fensterbreiten müssen gegebenenfalls noch Media Queries hinzugefügt werden.

Für andere Bilder müssen die Größen und Abstände natürlich angepasst werden. Das Schriftgröße, -farbe, -hintergrund, -schatten u.s.w. nur beispielhaft sind versteht sich von selbst.

Text auf Bild

Gruss

MrMurphy