Bitte um CSS-Hilfestellung (Bildzentrierung)

Hallo zusammen,

auf der Website unseres StadtWiki-Fördervereins möchte ich ein Quiz-Plugin installieren. Nach einigem Ausprobieren habe ich mich für "Quiz Cat" entschieden, welches auf dieser meiner Testsite (mit dem "Generate Press"-Theme) ganz wunderbar "out of the box" funktioniert:

https://www.klein-aber-fein.de/labor/pruefstand/

Leider schaut die Darstellung auf unserer Vereinsseite (die seit vielen Jahren mit einem farblich angepaßten "TwentyTen"-Standard-Theme läuft) nimmer ganz so schick aus, siehe die temporäre Demo ganz unten auf der Seite

https://www.fuerthwiki.de/verein/datenschutz/

Funktional ist alles OK, aber das Auge ißt ja mit: Insbesondere ist es störend und unelegant, daß die Fotos am Start und bei den einzelnen Frageseiten nicht zentriert erscheinen, sondern linksbündig (unabhängig von der Ausrichtungsoption beim Einbinden des Fotos aus der Mediathek).

Überdies fehlt bei den Fragen jeglicher Abstand zwischen der Bildunterkante und der ersten Antwortoption. Das liegt bestimmt an dem nicht vorhandenen Schattenrand rings herum. Ein solcher wäre schön, aber mit einem normalen Leerraum unter einem unschattierten Foto könnte ich auch gut leben...

Leider kann ich aber mit den Diagnose-Tools meines Browsers nicht wirklich gut umgehen und auch meine CSS-Kenntnisse sind eher rudimentär. Ich bin freilich einigermaßen hoffnungsfroh, daß mir ein(e) Kundige(r) hier mit ein, zwei kleinen CSS-Schnipseln für den Theme-Customizer ("Zusätzliches CSS") einen einfachen Ausweg aus dem doppelten Darstellungs-Dilemma zeigen kann.

Ich bedanke mich schon mal ganz herzlich für zielführende Hinweise!

Beste Grüße,
Ralph

Du bist mein Held! Funktioniert auf Anhieb korrekt und Nebenwirkungen/Kollateralschäden habe ich keine entdecken können...

Da ich dank Deiner Hilfe jetzt die korrekte CSS-Klasse kenne, habe ich mittels

box-shadow: 0 5px 15px rgba(0,0,0,0.7);

auch noch einen schönen Schattenrand um die nunmehr korrekt zentrierten Fotos generieren können. Dennoch klebt die erste Antwortoption bei jeder Frage weiterhin direkt an der Unterkante des Fotos. Gibt's da noch eine Möglichkeit, einen Abstand(shalter) unter dem Bild einzufügen?

Merci vielmals,
Ralph

Allerhand: Kaum macht man's richtig, schon funktioniert's! ;-)

Ganz herzlichen Dank für die schnelle und kompetente Unterstützung und noch ein schönes Adventswochenende!

Beste Grüße,
Ralph

Argh, ich habe doch eine höchst unerwünschte Nebenwirkung gefunden: Mit

#content img {
  margin: 0 auto 1.5em auto;
}

wird zwar alles wie gewünscht dargestellt, aber leider nur in der Desktop-Ansicht. In der Mobil-Ansicht - die ich dem uralten, nicht-responsiven Theme mit Hilfe des Plugins "WPtouch" aufgepfropft habe - werden jetzt die runden Preview-Artikelthumbnails an den linken Rand geschoben und die Permalinks rücken ebenfalls auf. Überdies gibt's in den Artikeln selbst keine Abstände mehr zum Headerbild... :(

Ich habe einen Teilerfolg erzielt, indem ich im Customizer auf das Mobil-Theme umgestellt habe und dort ein "CSS-Gegengift" eingegeben habe, um wieder zum ursprünglichen Aussehen zurückzukommen. Funktioniert auch prinzipiell, aber damit zerschieße ich dann logischerweise die mobile Ansicht des Wuiz-Plugins: Alles auf einmal ist so nicht zu haben!

Kann man denn nicht den gewünschten Effekt nebenwirkungsfrei erzielen, wenn man mit dem obigen CSS-Code nicht die übergeordnete Klasse (?) #content img adressiert, sondern vielmehr gezielt nur die Quiz-Bilder bzw. deren spezifische Klasse (?) anspricht, um die es ja ausschließlich geht, also sowas wie ".fca_qc_quiz_description_img"?

Das wiederum habe ich versucht, aber natürlich mangels grundlegenden Durchblicks nicht hinbekommen. Dürfte ich daher nochmals um Rat ersuchen?

Dank & Gruß,
Ralph

Im Prinzip stimme ich Dir zu und ich fange neue Projekte auch nur noch mit von Haus aus responsiven Themes an. Aber ich kann nicht alle meine "Altlasten" erneuern, da hängt viel dran (und viele handgeschnitzte Spezialtricks drin), was nicht mal so eben portierbar ist. Bei vor langer Zeit beauftragten (und längst bezahlten) Sites ginge der Aufwand überdies auf die eigene Kappe. Und ganz ehrlich: Mit WPtouch bekommt man durchaus eine ganz schicke Pseudo-Responsivität hin, die auch auf den zweiten Bilck wenig zu wünschen übrig läßt...

Melde mich gleich nochmal mit dem Ergebnis des neuen Tests...

Beste Grüße,
Ralph

Sodele, erwartungsgemäß killt die nunmehr punktgenau fokussierte Strahlentherapie das Problem, ohne unbetroffene Organe in Mitleidenschaft zu ziehen. Perfekt! Du hast schon recht mit Deiner Signatur: nothing is as easy as it looks.

Ich danke einmal mehr ganz herzlich, ziehe meinen nicht vorhandenen Hut in Anerkennung Deiner Expertise und wünsche einen gemütlichen zweiten Adventssonntag!

Beste Grüße,
Ralph