Text vertikal/horizontal zentrieren - tricky ;)

[molily]

Hallo,

Die anonyme table-Box, die erzeugt wird, ist halt nicht so groß wie dein Element, sondern nur so groß wie der Inhalt.

Im Prinzip könntest du dem absolut positionierten Element .refinfo die Eigenschaft display: table geben, aber dann wirkt top: 0 und bottom: 0 nicht mehr in der gewünschten Weise – das Element wird nicht mehr so groß gezogen wie das Bezugselement.

Da bei dir kein Element eine explizite Höhe hat, wird es schwierig. Ich würde versuchen, ein weiteres Element in .refinfo einzufügen, welches display: table und width/height: 100% bekommt.

http://jsfiddle.net/LYyST/4/

Im Übrigen lassen sich solche Animationen sehr schön mit CSS-Transformationen oder -Animationen umsetzen. JavaScript ist dazu oftmals nicht nötig.

Grüße,
Mathias