Bild + Titel bündig

Hallo zusammen,

ich bin gerade dabei eine kleine Fotoseite zu erstellen, komme aber logisch nicht weiter. Mir fehlt auch ein bissl Wissen, hab zu lange nicht mehr mit Contao gearbeitet. :o

Problem: Ich hab habe ein Bild, dies ist mittig ausgerichtet und die kurze Beschreibung des Bildes/Titel soll linksbündig mit dem Bild immer beginnen, unabhängig der Bildbreite (siehe Screenshot).
Wie kann ich das realisieren? Hab auch schon die SuFu genutzt, aber nix gefunden, falls ich ein passenden Beitrag doch übersehen haben sollte, sorry.

Vielleicht hat wer eine Idee.

Danke euch.
gecki.

Link zur Seite wäre schon ganz gut.
Normalerweise verwendest Du ja dabei das figure-element und der Text steht in figcaption. figcaption auf textalign-left (sollte eigentlich die Standardeinstellung des Browsers sein) und dann sollte das klappen.
Achso, die gewünschte Breite nicht auf img legen sondern auf figure und dort mit margin-left und margin-right auto zentrieren.

danke für die Antwort.

anbei der Link: hier

der Einwand mit der figcaption hab ich dann hinbekommen (was auch total logisch ist ^^). Das figure-Element ist nur aktuell so Breit wie der gesamte container, das Bild soll aber mittig sein und die figcaption linksbündig am Bild plaziert werden.

habs hinbekommen, mittels:

Code:

---

.ce_image{
text-align: center;
}

figure{
display: inline-block;
text-align: left;
}

---

Ich würde dir empfehlen die Bilder in .image_container immer display:block zu setzen. Das vereinfacht spätere Formatierungen, ermöglicht pixelgenaues Formatieren und lässt das Bild nicht mehr auf Eigenschaften reagieren, welche für Text gedacht sind - vertical-align, text-align, line-height ...

PHP-Code:

---

.image_container img {
    display: block;
} 


---

Zentrieren so wie du es möchtest kannst du dann ganz elegant mit:

PHP-Code:

---

figure {
    /* display: inline-block; */
    /* text-align: left; */
}
.ce_image {
    /* text-align: center; */
    margin: 0 0 50px;
    display: flex;
    justify-content: center;
} 


---