Vertical Centering some Text over an Image with Dynamic Height

Question

For whatever reason I am really beating myself up with this... No doubt because of the lack of support for a real "proper" way of vertically centering anything.

The Goal:

Is to have a set of four images, each inside their own responsive columns. Each image has a white overlay, that when hovered reveals more of the image, as well as a title for each of the 4 images that is horizontally and vertically centered inside the image.

I could easily achieve this if I set specific width/heights and stuck the image inside CSS rather than the HTML. For SEO reasons I want the image to be present in the HTML.

Additionally because of the responsive nature, the images must scale to 100% of the width of the column they reside in. Consequently, because the width scales, the height scales as well.

So the first issue is getting the "caption" as I am calling it in my classes, to appear over the top of the image. Easily done with a simple position: absolute; as well as top: 0; and left: 0; on the caption and position: relative; on the container.

The big problem and second issue, is vertically centering the "Gallery 1" text over the top of the image. I have to use the position: absolute; bit as I mentioned above just to get the text over-top of the image. From there I can't manage to get a display: table; solution to work, nor a -50% margin solution to work.

Here is a JS Fiddle

My HTML:

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

Any ideas on how to achieve this? I would like to stay at least IE8 supported, and I am using selectivizr already, so pseudo-classes don't bother me.

Answer 1

First, I wasn't sure about what you mean exactly. But as you mentioned:

The issue is centering the text Gallery 1 vertically over the top of the image. Centering it horizontally is easy with a simple text-align but centering it vertically is what is eluding me.

Here is my attempt to align the text vertically over the image. Actually the concept comes from this approach of a similar topic on SO:

.container { position: relative; }

.container img {
    vertical-align: bottom; /* Remove the gap at the bottom of inline image */
    max-width: 100%;
}

.caption {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    font: 0/0 a; /* Remove the gap between inline(-block) elements */
}

.caption:before {
    content: ' ';
    display: inline-block;
    height: 100%;
    vertical-align: middle;    
}

.caption a {
    font: 16px/1 Arial, sans-serif; /* Reset the font property */
    display: inline-block;
    vertical-align: middle;
    text-align:center;
    background: rgba(255, 255, 255, 0.75);
    width: 100%;
    padding: 1% 0; /* Added a relative padding for the demo */
}

WORKING DEMO.

This relies on CSS2.1 and it will definitely work on IE8+ (excluding rgba()).

Answer 2

If I understand your issue correctly, this may work for you:

Working Demo

If you need the image to scale when hovered over, then simply adding a :hover on the container and changing it's width should work.

CSS:

.container {
    // existing styles
    -webkit-transition: all .2s; // needs prefixes for other browsers.
}

.container:hover {
    width: 500px;
}

The only issue is that transition has no support for IE9 or earlier. So you'd need to go a JS route if that is an issue.