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.
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
.imageequal to the half of the helper’s height minus the half of the parent’s height. Works in IE6 either 🙂