Vertically align image while breaking out of container

Question

Okay, so I have various solutions for vertically aligning elements of arbitrary height within a container. All of these work when the content has a height that is smaller than the container.

What if the content height is taller than the container? For example, say I have a container of fixed height 100px. I also have some images of various heights; I need to vertically align these so the center point of the image matches the center point of the container, like so:

(can't upload images as I'm not reputable enough apparently) - example is here: http://gbradley.com/_images/stuff/valign.png

Without specifying the positions of the images manually, how can I achieve this? I feel like I'm missing something quite obvious.

Answer 1

If you don't need IE lesser than 8 and in standards mode, you can use big negative margin and helper pseudo-element: http://jsfiddle.net/kizu/CXRVn/

If you need older IE, you can use another way, using helper element with big height and some positioning quirks: http://jsfiddle.net/kizu/CXRVn/5/

There you must set the negative top offset to .image equal to the half of the helper's height minus the half of the parent's height. Works in IE6 either :)