English version

Mit CSS Flexbox kann man auf einfache Weise einen Text über ein Bild zentrieren oder ihn an verschiedenen Stellen positionieren. Und dies alles ohne großen Programmieraufwand: Einfach indem man in einer Flexbox den entsprechenden Text absolut positioniert mit:

Der Text lässt sich sowohl horizontal als auch vertikal verschieben, sodass man neun verschiedene Varianten erreicht:

• Oben links
• Oben mitte
• Oben rechts
• Mitte links
• Mitte mitte
• Mitte rechts
• Unten links
• Unten mitte
• Unten rechts

Mehr lässt Flexbox nicht zu. Jedoch dürften diese neun Varianten für die meisten Layout-Fälle ausreichen.

Vorgehensweise

Zuerst lege ich eine HTML-Struktur fest, die die Bilder mit Text aufnimmt. Jede Text-Bild-Kombination kommt in eine Box, die als Flexbox deklariert wird.

Damit die Bilder auch responsiv angezeigt werden, umgebe ich sie mit einem Raster, das ich mit CSS-Grid-Layout entwickle.

Für die HTML-Elemente vergebe ich Klassen, um sie anschließend per CSS stylen zu können. Die Klassennamen sprechen für sich: Dem Präfix "box" füge ich die Funktion an.

Die Bilder für den Code hole ich mir von der Website picsum.photos.

Hier der HTML-Code für sechs Beispiele:

HTML-Code
<div class="box-grid">
  <div class="box-flex">
    <img class="box-img" src="https://picsum.photos/230/300?random=1" alt="Image form https://picsum.photos" title="Image form https://picsum.photos">
    <h5 class="box-caption">Top Center</h5>
  </div>
  <div class="box-flex box-flex-center">
    <img class="box-img" src="https://picsum.photos/230/300?random=2" alt="Image form https://picsum.photos" title="Image form https://picsum.photos">
    <h5 class="box-caption">Center Center</h5>
  </div>
  <div class="box-flex box-flex-bottom">
    <img class="box-img" src="https://picsum.photos/230/300?random=3" alt="Image form https://picsum.photos" title="Image form https://picsum.photos">
    <h5 class="box-caption">Bottom Center</h5>
  </div>
  <div class="box-flex box-flex-top-right">
    <img class="box-img" src="https://picsum.photos/230/300?random=4" alt="Image form https://picsum.photos" title="Image form https://picsum.photos">
    <h5 class="box-caption">Top Right</h5>
  </div>
  <div class="box-flex box-flex-center-left">
    <img class="box-img" src="https://picsum.photos/230/300?random=5" alt="Image form https://picsum.photos" title="Image form https://picsum.photos">
    <h5 class="box-caption">Center Left</h5>
  </div>
  <div class="box-flex box-flex-bottom-right">
    <img class="box-img" src="https://picsum.photos/230/300?random=6" alt="Image form https://picsum.photos" title="Image form https://picsum.photos">
    <h5 class="box-caption">Bottom Right</h5>
  </div>
</div><!-- end box-grid -->

Das Raster wird erstellt

Ein Raster für die Bilder, das automatisch responsiv ist, erstelle ich mit CSS-Grid-Layout:

CSS-Code
.box-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  grid-gap: 1.5rem;
  justify-items: center;
  margin: 0;
  padding: 0;
}

Wie das funktioniert, habe ich in meinem Artikel Responsive Bildergalerie mit CSS-Grid-Layout erstellen ausführlich erläutert.

Absoluter Text

Der Text wird einfach zentriert oder positioniert, indem man das HTML-Element, das den Text beinhaltet, absolut setzt. Ich packe den Text in eine Überschrift "h5" und vergebe ihr die Klasse "box-caption". Um einen Overflow zu vermeiden, werden eine maximale Breite und ein word-break gesetzt. Zu beachten ist, dass das Elternelement des Textes – hier "box-flex" – mit "display: flex" ausgezeichnet ist.

Der entsprechende CSS-Code für den Text lautet:

CSS-Code
.box-caption {
  position: absolute;
  max-width: 200px;
  word-break: break-word;
}

Flexibler Text

Die Bilder "img" und die Texte "h5" sind Kinder oder Items der "divs" mit der Klasse "box-flex". Somit lassen sie sich über die CSS-Anweisungen "align-items" und "justify-content" positionieren. Ob nun "align" oder "justify" für die horizontale oder vertikale Position verantwortlich ist, hängt davon ab, wie die Ausrichtung der Flexbox definiert wird: flex-direction: row   oder   flex-direction: column.

Ich habe das Elternelement "box-flex" als "row" deklariert; somit kann ich den Text über "align-items" vertikal und über "justify-content" horizontal verschieben. Hier der CSS-Code für sechs Varianten:

CSS-Code
/* Standard: Top Center */
.box-flex {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  padding: .5rem;
  text-align: center;
  font-size: 1.2rem;
  word-break: break-word;
  background-color: #333333;
  color: #d9d9d9;
}

/* Box: Center Center */
.box-flex-center {
  align-items: center;
}

/* Box: Bottom Center */
.box-flex-bottom {
  align-items: flex-end;
}

/* Box: Top Right */
.box-flex-top-right {
  justify-content: flex-end;
}

/* Box: Center Left */
.box-flex-center-left {
  align-items: center;
  justify-content: flex-start;
}

/* Box: Bottom Right */
.box-flex-bottom-right {
  align-items: flex-end;
  justify-content: flex-end;
}

Das Ergebnis

Das Ergebnis ist eine kleine Bildergalerie mit sechs Bildern. Der Text über den Bildern ist an sechs unterschiedlichen Positonen zu sehen. Als Standard habe ich "oben mitte" festgelegt und von dort aus die Varianten abgeleitet.

Bildergalerie mit Varianten von Overlay-Text

Top Center

Center Center

Bottom Center

Top Right

Center Left

Bottom Right

Multiple Texte auf ein Bild positionieren

Mit der CSS-Anweisung "align-self" lassen sich auch mehrere Texte auf einem Bild platzieren.

Hier der HTML-Code für drei Varianten:

HTML-Code
<div class="box-flex">
  <img class="box-img" src="https://picsum.photos/230/300?random=1" alt="Image form https://picsum.photos" title="Image form https://picsum.photos">
  <h5 class="box-caption">Top Center</h5>
  <h5 class="box-caption align-end">align-self: flex-end</h5>
</div>
<div class="box-flex box-flex-center">
  <img class="box-img" src="https://picsum.photos/230/300?random=2" alt="Image form https://picsum.photos" title="Image form https://picsum.photos">
  <h5 class="box-caption align-start">align-self: flex-start</h5>
  <h5 class="box-caption">Center Center</h5>
  <h5 class="box-caption align-end">align-self: flex-end</h5>
</div>
<div class="box-flex box-flex-bottom">
  <img class="box-img" src="https://picsum.photos/230/300?random=3" alt="Image form https://picsum.photos" title="Image form https://picsum.photos">
  <h5 class="box-caption align-center">align-self: center</h5>
</div>
  <h5 class="box-caption">Bottom Center</h5>
</div>

Der CSS-Code für die drei Varianten ist schnell geschrieben:

CSS-Code
/* align-self: flex-start */
.align-start {
  align-self: flex-start;
}

/* align-self: center */
.align-center {
  align-self: center;
}

/* align-self: flex-end */
.align-end {
  align-self: flex-end;
}

Das Ergebnis

Der neu hinzugekommene Text wird hier an drei verschiedenen Positionen platziert; wie man sehen kann, lassen sich auch mehrere zusätzliche Texte auf ein und dasselbe Bild legen.

Top Center

align-self: flex-end

align-self: flex-start

Center Center

align-self: flex-end

align-self: center

Bottom Center

Links

Ausführliche information zum Konzept "CSS Flexbox": CSS-Tricks und Codrops

Ein Spickzettel (cheat sheet) für CSS-Flexbox: immer wieder nützlich!

Der gesamten Code auf Codepen.

Die Bilder sind von pixabay.com.