Box mit zentriertem Text erstellen

[Gunnar Bittersmann]

@@ManU.K

Ich möchte eine Box erstellen, in der ein Bild angezeigt wird.

Zur Dekoration, also ein Hintergrundbild? background-image.

Auf diesem Bild soll Text zu sehen sein. Um diesen Text soll eine Art durchsichtiger Rahmen sein

padding.

Außerdem soll der Text/Rahmen sowohl vertikal als auch horizontal in dem Hintergrundbild zentriert werden.

Das ginge mit display: table-cell: Beispiel

Oder doch besser mit Flexbox: Beispiel

Beachte: Bei display: table-cell wirkt min-height nicht, dafür wirkt height wie min-height.

LLAP 🖖