Bilder zentrieren, ungewöhnlich!

Webhufi

Erfahrenes Mitglied
Hallo,

in meinem CMS habe ich Bilder eingefügt, die in einer Art Box präsentiert werden. Leider finde ich keine Möglichkeit, Hochkantbilder in dieser Box zu zentrieren; das sieht einfach doof aus... (Bild 1).
Ich habe jedoch die Möglichkeit des Einfügens von CSS, kriege jedoch nicht raus, wie und ob überhaupt; die Eintragung dort funktioniert nicht. (Bild 2).

Viele Grüße
Norbert
 

Anhänge

  • Bild 1.jpg
    Bild 1.jpg
    68,1 KB · Aufrufe: 13
  • Bild 2.jpg
    Bild 2.jpg
    90,9 KB · Aufrufe: 11
Guten Abend Norbert und willkommen zurück!
Deine Homepage habe ich unter dem Begriff "Donnerhuf" wieder gefunden aber nicht diese spezielle Seite mit den Bildern. Möglicher Weise noch in Entwicklung und nicht online?
Zentrieren ist dank Flexlayout einfach mit diesem CSS:
Code:
.container {
    display: flex;
    align-items: center;
    justify-content: center;
}
wobei "container" die Klasse des Containers ist, in dem das Bild liegt. Auf diesen muss das CSS angewendet werden und nicht auf das Bild selbst.
Wenn Du dabei nicht zum Ziel kommst dann poste das HTML aus der Quelltextansicht deines Browsers.
Beste Grüße - Ulrich
 
Hallole Ulrich! :-)

"Donnerhuf" ist ja nur eine Page von dreien... ;-)
Hier handelt es sich um die Kunst in Ludwigshafen; ich habe die Page gerade aktualisiert, obwohl ich das ungern mache während eines Umbaus. Bitte schau mal, denn ich kommen in der Tat nicht zurecht. Muss ich deinen Code in die Box des Bildes 2 eintragen? Das kann wohl nicht funktionieren, ohne eine Klasse anzugeben?
Herzliche Grüße
Norbert
 
Ich habe mal den HTML-Inspektor genommen und mit diesem CSS kann ich das Bild zentrieren:
Code:
.zpColumnItem .zpwBild.zproundimage {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
Ich hoffe, durch die Klasse "zproundimage" ist es spezifisch genug, damit es andere Elemente nicht beeinflusst. Wenn nicht, müssen wir weiter sehen.
Das CSS bezieht sich nicht auf das Bild sondern auf den Container um das Bild und das a-Tag herum. Wo Du das eintragen musst kann ich dir leider nicht sagen.
 
Ich danke dir vorläufig, Ulrich! Aber ich muss erstmal zusehen, dass ich die Page erneuere, die sieht ja grausam aus und wird häufig besucht!
Dann werd ich schauen, ob und wo ich deinen Vorschlag unterbringen kann.
Bis denne!
 
Hallo Ulrich,

ich habe deinen Code eingebunden; möglicherweise landet er an der falschen Stelle (das hatten wir glaube ich schon einmal!). Oder ich habe die Einträge nur falsch in die Box eingetragen (sehr wahrscheinlich!), denn es tut sich nichts.

Danach habe ich die Codes wieder entfernt und die Seite erneut hochgeladen: jetzt bin ich gerade dabei, die verschwundenen Bilder neu zu verlinken... :-(

Eben noch einmal deinen Code eingegeben und hochgeladen, damit du das Ergebnis siehst.
 

Anhänge

  • CCS.jpg
    CCS.jpg
    23,2 KB · Aufrufe: 1
  • nach CSS online.jpg
    nach CSS online.jpg
    92,8 KB · Aufrufe: 2
Guten Abend Ulrich,

ja, diese Vorgehenseise kenne ich. Nur: Ich möchte das ja nicht global, sondern nur für diese einzige Seite mit den abgerundeten Bildern.
Sehr lieb übrigens, dass du dich dort umgesehen hast! :)
 
JUHUUU! Es klappt!
Diese Möglichkeit in der Darstellung gab es in der letzten Version noch nicht...
Es ist doch sinnvoll, mal in die Hilfe zu schauen! :-)

Jetzt muss ich nur noch den Fehler in ZP ausbügeln und alle fehlenden Bilder neu verlinken. Und diesen Fehler melden.
Wieder einmal ganz herzlichen Dank, lieber Ulrich!!!

Übrigens: Warum steht bei mir "Erfahrenes Mitglied"? Wegen der Anzahl der Posts? Das wirft ein völlig falsches Bild auf den Webhufi... ;-)

Viele Grüße
Norbert
 
Zurück