wolik: Ein Bild zentriert auf der Seite anordnen

Hallo, ich möchte ein Bild auf der Seite so anordnen, daß es immer zentriert angezeigt wird, egal wie breit die Seite ist. Bisher habe ich es so definiert:

figure {
  position: relative;
  margin: 5;
  padding: 10px;
  width: 507px;
  border: 1px solid gainsboro;
  background: white;
}

figcaption {
  padding: 10px;
  text-align: center;
}

Damit steht es links mehr oder weniger am Rand - "margin: 5;" verschiebt es, aber ich suche eine Einstellung die das Bild auf der Seite horizontal zentriert.

Vielen Dank für Hinweise.

  1. Tach!

    ich möchte ein Bild auf der Seite so anordnen, daß es immer zentriert angezeigt wird, egal wie breit die Seite ist.

    Siehe https://wiki.selfhtml.org/wiki/CSS/Tutorials/Inhalte_zentrieren.

    dedlfix.

  2. Eine Zusatzfrage: in "figure { .... width: 507px; .... }" kann man die Breite des Bildes so definieren, dass sie sich automatisch an die Bildbreite anpasst ?

    1. Hallo wolik,

      das geht mit width:max-content auf dem figure-Element; allerdings ist die Kompatibilität da noch nicht so besonders

      Rolf

      --
      sumpsi - posui - clusi
      1. @@Rolf B

        das geht mit width:max-content auf dem figure-Element;

        Da hab ich doch einen Codepen rumzuliegen …

        allerdings ist die Kompatibilität da noch nicht so besonders

        Wie du bei „geht in allen relevanten Browsern außer einem“ von „nicht besonders“ sprechen kannst, erschließt sich mir nicht.

        Ansonsten ist’s ein Einzeiler in JavaScript.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. Hallo Gunnar,

          tut mir leid, für mich sind IE und Edge noch relevant. Auch wenn's nur 5% des deutschen Browsermarkes sind. Man braucht immer noch Präfixe, und FF kennt es nur bei width. Die Spec ist nach wie vor im Status Working Draft und warnt vor "change at any moment". Sorry, das ist für mich nicht produktionsreif.

          Aber ich arbeite ja auch bei einer Versicherung, da saugt man diese Denke wohl im Laufe der Jahrzehnte (sic! 😟)auf.

          Der JavaScript-Einzeiler als Fallback ist jedenfalls ein guter Plan, tut aber nicht unbedingt das Richtige. Ich hatte etwas gebastelt, da wird das Bild durch das Script auf die initial angezeigte Breite fixiert, kann dann aber nicht mehr zu seiner maximalen pyhsischen Breite wachsen. Gibt's da was?

          Rolf

          --
          sumpsi - posui - clusi