Alinear verticalmente la imagen mientras se sale del contenedor

Question

De acuerdo, entonces tengo varias soluciones para alinear verticalmente elementos de altura arbitraria dentro de un contenedor. Todos estos funcionan cuando el contenido tiene una altura menor que el contenedor.

¿Qué sucede si la altura del contenido es más alta que el contenedor? Por ejemplo, supongamos que tengo un contenedor de altura fija de 100 px. También tengo algunas imágenes de varias alturas; Necesito alinearlos verticalmente para que el punto central de la imagen coincida con el punto central del contenedor, así:

(no puedo cargar imágenes porque aparentemente no tengo buena reputación) - ejemplo está aquí: http://gbradley.com/_images/stuff/valign.png

Sin especificar las posiciones de las imágenes manualmente, ¿cómo puedo lograr esto? Siento que me falta algo bastante obvio.

Answer 1

Si usted no necesita IE menor que 8, y en el modo estándar, puede utilizar gran margen negativo y ayudante de pseudo-elemento: http://jsfiddle.net/kizu/CXRVn/

Si necesita mayor IE, puede utilizar de otra manera, el uso de ayudante elemento con gran altura y algunos caprichos de posicionamiento: http://jsfiddle.net/kizu/CXRVn/5/

Allí debe establecer el desplazamiento superior negativo a .image igual a la mitad de la altura del ayudante menos la mitad de la altura del padre. Funciona en IE6 cualquiera :)