Bild in Box zentrieren (hori+vert) trotz "em" Angaben

[fabio]

Hi

Also, folgendes Problem, ich versuche, ein Bild in einer DIV-Container zu zentrieren, horizontal als auch vertikal.
Ausschauen sollte das ganze in etwa so:


Das ganze wäre auch nicht so schwer, wenn ich überall "px" als Masseinheit nehmen würde.
Steven Clay hat dazu auch eine feine Lösung.
mrclay.org : Centered Image

Problem ist, ich will die Homepage mit relativen Grössen gestalten, also nutze immer die Einheit "em", dass die Homepage nahtlos mit dem Text vergrössert werden kann.

Leider funktioniert der Hack unter Internet Explorer dann nicht mehr.

Weiss jemand einen Trick, wie man trotz "em"-Mass auch im Internet Explorer zentrieren kann?

[AmicaNoctis]

Hallo,

wenn dir die Bildgröße jeweils bekannt ist - davon gehe ich einfach mal aus - kannst du das div mit position: relative ausstatten und das Bild mit position: absolute auf 50% 50% positionieren. Dann gibst du dem Bild einen margin-top mit der negativen halben Höhe und ein margin-left mit den negativen halben Breite des Bildes in px. Das war's.

Gruß,

Amica

[fabio]

wenn dir die Bildgröße jeweils bekannt ist..

Jein.

Die Bilder haben alle unterschiedliche Seitenverhältnisse, lediglich die längere Seite ist fix.

Ich könnte zwar bereits in der PHP-Datei das Grösse des Bildes auslesen und es direkt in den HTML Code einarbeiten, das bringt aber zusätzliche Probleme und einen ziemlichen Mehraufwand.

Beim Bildwechseln via Javascript könnte ich dann nicht einfach nur die "src" Eigenschaft wechseln, sondern müsste dann auch noch via JS die Grösse auslesen (oder via PHP in einen JS-Array speichern) und das CSS via Javascript anpassen.

Zwar alles möglich, aber eine reine CSS Lösung wäre schon besser.

[AmicaNoctis]

Beim Bildwechseln via Javascript könnte ich dann nicht einfach nur die "src" Eigenschaft wechseln, sondern müsste dann auch noch via JS die Grösse auslesen (oder via PHP in einen JS-Array speichern) und das CSS via Javascript anpassen.

Was ist daran so schlimm? Das sind zwei zusätzliche Codezeilen und nicht mal ein Hack.

[fabio]

Wie gesagt, möglich schon, aber wenn es eine CSS-only Lösung gäbe wäre mir das lieber, zumal die flexibler wäre.

[AmicaNoctis]

Wie gesagt, möglich schon, aber wenn es eine CSS-only Lösung gäbe wäre mir das lieber, zumal die flexibler wäre.

Die gibt es in diesem Falle leider nicht, da du die Bilder mit JS austauschst.
Eine Möglichkeit wäre, das div durch eine blinde Layouttabelle zu ersetzen, was ich aber nur der Vollständigkeit halber erwähne, denn das wäre wieder ein dreckiger Hack, würde aber per CSS mit vertical-align: center gehen.