Вертикально выровнять изображение, вырываясь из контейнера

Question

Хорошо, у меня есть различные решения для вертикального выравнивания элементов произвольной высоты внутри контейнера.Все это работает, когда содержимое имеет высоту, меньшую, чем контейнер.

Что если высота содержимого выше контейнера?Например, скажем, у меня есть контейнер фиксированной высоты 100px.У меня также есть несколько изображений различной высоты;Мне нужно выровнять их по вертикали, чтобы центральная точка изображения совпадала с центральной точкой контейнера, например:

(не могу загрузить изображения, так как, по-видимому, я недостаточно авторитетен) - пример здесь:http://gbradley.com/_images/stuff/valign.png

Без указания положения изображений вручную, как этого добиться?Я чувствую, что упускаю что-то совершенно очевидное.

Answer 1

Если вам не нужен IE меньше 8 и в стандартном режиме, вы можете использовать большой отрицательный запас и вспомогательный псевдоэлемент: http://jsfiddle.net/kizu/CXRVn/

Если вам нужен более старый IE, вы можете использовать другой способ, используя вспомогательный элемент с большой высотой и некоторыми особенностями позиционирования: http://jsfiddle.net/kizu/CXRVn/5/

Там вы должны установить отрицательное верхнее смещение на .image, равное половине высоты помощника минус половина высоты родителя. Также работает в IE6:)