2011-10-07 12 views
5

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.Alinear verticalmente la imagen mientras se sale del 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.

+0

¿Puedo sugerir el uso de javascript (jQuery) en absoluto? –

+0

Espero realmente una solución CSS; ¡Puedo hacerlo fácilmente con JS pero me gustaría evitar hacerlo si es posible! – Graham

+0

No creo que haya una manera pura de hacerlo, mi buen hombre. Dado que desea que salgan del contenedor en función de su tamaño, debe ingresar manualmente un valor superior o dejar que javascript lo calcule por usted. – Pat

Respuesta

5

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 :)

+0

+1 - muy agradable. No tenía idea de que algo como eso fuera posible. – Pat

+0

Brillante, esto es exactamente lo que estoy buscando. No pensé en usar un pseudo-elemento, parece funcionar perfectamente. – Graham

+0

¡Increíble! Aquí hay una versión que usa texto y oculta el desbordamiento con un contenedor: http://jsfiddle.net/MSUfR/ –

Cuestiones relacionadas