<img> über html zentrieren

Question

Hallo, ich habe ein Problem mit der Visualisierung meiner Ergebnisse.
Der Visualisierungscode (Skala für einzelne Werte) verwendet als Balken ein "Background Image" welches jedoch nicht gedruckt werden kann.
Darum wollte ich das Background Image als normales einfügen, jedoch schaffe ich es nicht, das dieses zentriert wird. Hat da jemand vielleicht eine Lösung dafür? Vielen Dank schon mal!

LG,

Answer 1

Prinzipiell kann ein Hintergrundbilsch schon gedruckt werden, aber Firefox und andere Browser haben dies standardmäßig deaktiviert.

Sie können Elemente prinzipiell auch mittels CSS-Positionierung (position: absolute) übereinander platzieren. Das könnte dann etwa wie folgt aussehen:

<div class="title" style="text-align: center">%title%</div>
<div style="position: relative">
  <div style="margin: 0 auto; width: 400px; height: 25px;">
      <!-- Die Skala absolut im Hintergrund positioniert -->
      <img src="ofb://slider.scale.sd-blue400S" style="position: absolute; left: 0; top: 0;">
      <!-- Zur Platzierung der Markierung wird eine Einheit (Bereich 0 bis 1) als Blockelement platziert -->
      <div style="position: absolute; top: -2px; left: 50%; width: 65px; height: 27px">
        <!-- Die eigentliche Markierung wird an der richtigen Stelle eingefügt -->
        <img src="ofb://slider.button.rhomb" alt="" style="position: absolute; left: %z-value*100%%; margin-left: -8px" />
      </div>
  </div>
</div>

Gegenüber dem Code in der Anleitung wurde hier das background-image entfernt und dafür ein <img> mit absoluter Positionierung eingefügt.