Center text vertically over a dynamic-height image

Question

For some reason, I really beat myself up with this ... Without a doubt, due to the lack of support for the real "right" way to center everything vertically.

Purpose:

You must have a set of four images, each of which is inside its own columns. Each image has a white overlay, which when hovering displays more of the image, as well as a caption for each of the four images, which are located horizontally and vertically inside the image.

I could easily achieve this if I set a specific width / height and pin the image inside CSS, not HTML. For SEO reasons, I want the image to be present in HTML.

In addition, due to the responsive nature of the image should be scaled to 100% of the width of the column in which they are located. Therefore, since the width scales are also scaled in height.

So, the first problem is getting a "caption" as I call it in my classes to display on top of the image. Easily accomplished with a simple position: absolute; , as well as top: 0; and left: 0; in the header and position: relative; in the container.

The big problem, and the second problem, vertically centers the text "Gallery 1" on top of the image. I have to use the bit position: absolute; , as I mentioned above, to get text on top of the image. From there, I will not be able to get the solution display: table; for work, as well as no more than -50% marginal solution for work.

Here is JS Fiddle

My HTML:

 <div class="container"> <img src="http://lorempixel.com/output/city-qc-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 support at least IE8 support, and I'm already using selectivizr, so the pseudo-classes don't bother me.

Answer 1

First, I was not sure what you mean. But, as you mentioned:

The problem is centering Gallery 1 text vertically above the top of the image. Centering horizontally is easy with a simple text-align , but centering vertically is what eludes me.

Here is my attempt to align the text vertically above the image. In fact, the concept stems 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 .

It depends on CSS2.1, and it will definitely work on IE8 + (excluding rgba() ).

Answer 2

If I understand your problem correctly, this might work for you:

Working demo

If you need an image to scale when you hover over, just add :hover to the container and change its width.

CSS

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

The only problem is that transition does not support IE9 or earlier. Thus, you will need to use the JS route if this is a problem.