Bildunterschrift in Bildmitte.

Hallo liebe Community,

wie in der Überschrifft zu lesen ist, möchte ich folgendes Ergebniss haben.
Die Bildunterschrift soll in der Bildmitte ( horizontal und vertikal mittig) auf dem Bild platziert werden.
Die div Container habe ich schon die Position: relative --> Position: absolut zugewiesen.
In diesem Fall ist das Problem das ich den div Containern eine fixe Höhe und Breite mitgeben muss.
Ich möchte aber keine fixe Höhe und Breite mitgeben, sondern max die Max Höhe und Breite.

Gibt dazu eine einfache Lösung ohne das ich das Template umschreibe.
Danke

Horizontal oder vertikal mittig oder beides? Soll der Text auf, über, neben oder unter dem Bild platziert werden?

Guten Morgen Rusty,

habe meinen Text ganz oben geändert.

Zitat:

---

Die Bildunterschrift soll in der Bildmitte ( horizontal und vertikal mittig) auf dem Bild platziert werden.

---

Die figure bekommt position: relative , die figcaption bekommt folgendes:

position: absolute;
left: 1em;
right: 1em;
top: 50%;
text-align: center;
transform: translateY(-50%);

Danke rusty,

genau das habe ich gebraucht.

Ich hätte da noch etwas:

HTML-Code:

---

<div class="ce_image block">
  <figure class="image_container">
    <a href=".../ueber-uns.html" title="Über uns">
      <img src="Bild1.jpg" alt="" title="Über uns" width="240" height="240">
    </a>
    <figcaption class="caption">Über uns</figcaption>
  </figure>
</div>

---

Ich habe dem Bild einen Link mitgegeben und die Beschriftung "Über uns" steht genau in der Bildmitte.

Wenn ich mit der Maus auf das Bild klicke, werde ich auf die Seite ".../ueber-uns.html" weitergeleitet.
Wenn ich mit der Maus in den Bereich vom "figcaption" komme, dann habe ich keine Weiterleitung.

Ich weiß das ich die PHP Anpassen könnte, damit figcaption auch den gleichen LINK, dieses das Bild hat bekommt.

Meine Frage:
Gibt es in CSS ein Möglichkeit, wenn ich mit der Maus auf z.B. figcaption fahre, das figcaption durchdringend dargestellt wird.
Ich klicke mit der Maus auf das figcaption-Element und werde auch die Seite, diesen ich dem Bild zugewiesen habe, weitergeleitet.

Ich hoffe ich habe es nachvollziebar erklärt.

Diese Möglichkeit gibt es:
pointer-events: none;
Damit wird die figcaption für Mausereignisse quasi unsichtbar.

Hallo,

gilt díeses nur für Mousereignisse.
Wie sieht die Situation auf einem mobilen Gerät (Handy, Tablet, ...) aus?