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.

Answer 1

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.