Question

I’m trying to set up a responsive header that takes an image and resizes it to the browser – easy enough. What I can’t manage to achieve is centring the image vertically within it’s container (in this case an a element)

See example:
http://jsfiddle.net/jwoodcreative/tUW3k/

I’ve tried a few css tricks that havent worked and some jQuery. Either type of solution would suit if anyone knows of one.

Answer 1

You can always use the top:50%, bottom: 50% trick like here: jsfiddle v13

.outerElement {
    position: relative;
    height: XXpx;
    top: 50%;
}

.innerElement {
    position: absolute;
    bottom: 50%;
}

This works, because the height of the innerElement is not the same as the one of the outer Element, so you can center your element (if the heights were identical, you’d just position it to pos:0 again)