(Anfänger) Bild zentrieren und beschriften klappt nicht

[eGSAN]

Hallo liebe Community,

aktuell lerne ich HTML und CSS als Quereinsteiger. Nun habe ich folgendes Problem: Ich möchte ein Foto in der Mitte einer Webseite platzieren und dabei beschriften. Das "nur platzieren" bekomme ich hin. Beides führt zu Problemen, das Bild betreffend. Es ist dann plötzlich ganz klein, nicht mehr in der Mitte oder beides.

Hier mein Code HTML der entsprechenden Stelle meiner Übungsseite:

[...]
<main>
<div class="fleximg">
<figure>
<img src="CIMG0520c.png" alt="Eveline und Volker Hartung" title="Eveline und Volker Hartung">
<figcaption>Evelne und Volker Hartung</figcaption>
</figure>
</div>
</main>
[...]


CSS:

.fleximg {
display: flex;
justify-content: center;
align-items: center;
}

Mit diesem Code ist das Bild zu klein und nicht mehr mittig zentriert.

Mit freundlichen Grüßen
eGSAN

[Christian Marquardt]

Das sollte schon funktionieren. Wenn nur ein Element da ist, kann auf align-items verzichtet werden
Das Bild kann nicht kleiner werden, da keine Größenangaben vorhanden sind. Es sollte also in seiner ursprünglichen Größe angezeigt werden
https://www.w3schools.com/css/css3_flexbox.asp
https://www.mediaevent.de/css/img.html

Du solltest also im Browser testen (Firefox -> F12), was genau für ein CSS erzeugt wird und dort daran herumschrauben

[eGSAN]

(Okay, align-items habe ich rausgenommen).

Ich bin nur ein Anfänger. Und war ebenfalls der Meinung, dass es funktionieren müsste. Aber das tut es leider nicht. Und das "Warum" ist mir wirklich schleierhaft.

Deinen Ratschlag habe ich nicht so ganz begriffen. Wenn ich in meinem Browser, hier Firefox, den Quelltext mit F12 aufrufe, sehe ich keinen zusätzlich vom Browser erzeugte CSS Datei, oder Code. Sondern nur meinen CSS Code. Ich spiele mit Code herum, das mache ich in meinem Editor mit "Live Server".

Das Bild wird in der Tat kleiner. Es wird nicht in seiner Originalgröße angezeigt, wenn ich <figure><figcation></figcation></figure> verwende, sondern verkleinert und in seiner Position verschoben. Ich habe einmal die zusätzlichen Attribute width="..." und height="..." verwendet. Mit Werten bis 2000. Höhere Werte ergaben keine weiteren Ergebnisse mehr. Das Originalbild hat die Abmessungen 420x310. Mit den Werten "2000" erscheint das Bild in Originalgröße. Ich habe es mit einem ScreenLineal nachgemessen.
Es ist wirklich der Fall: Das Bild verrutscht nach links und wird so klein, dass darauf kaum noch etwas zu erkennen ist.
Lasse ich die Bildbeschriftung weg (<figure><figcation></figcation></figure>), ist das Bild schön mittig und ausreichend groß, wenn auch nicht in Originalgröße (scheint mir etwas darunter zu liegen). Also liegt es meines Anfängererachtens an der Bildbeschriftung, die eine Verzerrung auslöst. Nur warum verstehe ich nicht und auch nicht, wie ich das Bild nun beschriften kann, ohne dass es verkleinert und nach links verschoben wird.

Ich werde Screenshots davon anfertigen, dann kannst Du sehen, was ich meine.

[eGSAN]

Jetzt habe ich mir die Mühe gemacht, und habe extra Screenshots im 2d Editor unkenntlich gemacht, damit ich sie zeigen kann, aber sie lassen sich nicht hochladen, beide im jpg Format... Image library no support for this image type. Aber in der library steht, das jpg unterstützt wird.

[Christian Marquardt]

https://ibb.co/MZQCt9N

Hier kannst du sehen, auf welchen CSS ein Element, welches du per Klick ausgewählt hast, beruht, es ein-/ausschalten und ändern. Es werden wohl andere CSS-Elemente das Verhalten hervorrufen

Weiterhin kann man ein Bild auch ohne Flexcontainer zentrieren
https://www.w3schools.com/howto/howt...age_center.asp