Por la razón que sea, realmente me estoy castigando con esto ... Sin duda debido a la falta de apoyo para una verdadera forma "correcta" de centrar verticalmente cualquier cosa.

La meta:

Es tener un conjunto de cuatro imágenes, cada una dentro de sus propias columnas de respuesta. Cada imagen tiene una superposición blanca, que cuando se desplaza muestra más de la imagen, así como un título para cada una de las 4 imágenes que está centrada horizontal y verticalmente dentro de la imagen.

Podría lograrlo fácilmente si estableciera anchuras / alturas específicas y pegara la imagen dentro de CSS en lugar de HTML. Por razones de SEO quiero que la imagen esté presente en el HTML.

Además, debido a la naturaleza de respuesta, las imágenes deben escalar hasta el 100% del ancho de la columna en la que residen. Por consiguiente, debido a que el ancho se escala, la altura también se escala.

Así que el primer problema es obtener el "título" como lo llamo en mis clases, para que aparezca en la parte superior de la imagen. Fácilmente hecho con un simpleposition: absolute; tanto comotop: 0; yleft: 0; en la leyenda yposition: relative; en el contenedor.

El gran problema y el segundo problema es centrar verticalmente el texto "Galería 1" sobre la parte superior de la imagen. Tengo que usar elposition: absolute; como mencioné anteriormente solo para obtener el texto sobre la parte superior de la imagen. Desde allí no consigo conseguir undisplay: table; solución para trabajar, ni una solución con margen de -50% para trabajar.

Aquí hay unJS Fiddle

MiHTML:

<div class="container">
    <img src="http://lorempixel.com/output/city-q-c-640-480-8.jpg" />
    <div class="caption">
        <a href="#">Gallery 1</a>
    </div>
</div>

¿Alguna idea sobre cómo lograr esto? Me gustaría tener al menos IE8 compatible, y ya estoy usando selectivizr, por lo que las pseudo-clases no me molestan.