Bild zentrieren, das über den Div hinausragt

[Chrissi007]

Hi,

Nachdem ich dank eurer Hilfe mein erstes Problem lösen konnte stehe ich mittlerweile vor meinem nächsten Problem.

Damit es keine Missverständnise gibt habe ich das Problem in Form einer Grafik veranschaulicht:



Was ich möchte, ist prinzipiell, dass ein Bild vertikal zentriert wird, und dabei über das aktuelle <td> bzw. <div> Element hinausragt.

Die Quick&Dirty-Methode wäre wohl dem Bild folgende Attribute zu verpassen:

style="position: absolute; margin: -20px 0px 0px 30px;"

Das Problem hierbei ist allerdings, dass das Bild sich in der Höhe als auch in der Breite ändern kann. Es handelt sich um ein User Avatar, die ja leider gewöhnlich in unterschiedlichen Formaten sind. Also mit einem Margin drücken und schieben und versuchen das Bild dann auf diese weiße zu zentrieren, haut nicht hin.

Ich bin auf der Suche nach einer Möglichkeit, einen Div um ein Bild zu legen und diesen Div innerhalb der TD-Zeile vertikal zu zentrieren. Nur findet man im Internet leider nichts passendes, wo "über ein Element hinaus zentriert wird".

Ist sowas überhaupt möglich?

[jmc]

Ich hatte einmal ein ähnliches Problem, aber ohne javascript ging das nicht gut.
Eine Möglichkeit wäre in deinem Fall evtl ein Textfeld um alles herum zu machen und dann beides dein Avatar und dein div in diesem Textfeld vertikal zu zentrieren. Je nachdem wo das eingebunden werden soll ist es aber kaum möglich, ausser das div bleibt immer gleich gross und am selben Ort (absolut ein Layer darüber positionieren und dort alles vertikal mitteln).

[ArSeN]

Die alternative wäre, wenn du bspw. PHP hast (wovon ich mal ausgehe wenn du von Useravataren redest), deine quick'n'dirty-methode zu verwenden und die benötigte Verschiebung nach oben bereits Anhand der Avatargröße Serverseitig zu berechnen und dann nurnoch zu übergeben. (vgl. getimagesize())