CSS Vertical Alignment Problem

Question

Consider the following example: (live demo here) HTML:

Result, with no further tweaks than what I've mentioned here: http://jsfiddle.net/jESsA/38/.

This will work on all decent browsers, and even on IE8/9, but it won't work on IE6/7. A technique for solving this which should work in IE6/7 is this: on the a, set display to block and alter the line-height from 0 to 78px (I'm not entirely clear on why 80px makes it shift down one pixel, but it does; if I thought about it long enough I could probably figure out why), and shift the vertical-align: middle to the img child. Final result: http://jsfiddle.net/jESsA/44/

Solution 2:

You can try assigning a vertical-align attribute on the img tag. Vertical align is relative to the line box which means you need to set the line box as tall as the height of the a tag. So these changes are needed in your CSS markup:

#outer_wrapper {
    overflow: hidden; /* required when you float everything inside it */
}

.wrapper {
    /* display: inline-block is not required */
    /* text-align: center is not required -- see below */
    float: left; /* float all wrappers left */
}

a {
    display: block; /* block display required to make width and height behave as expected */
    margin-left: 4px; /* shift the block to make it horizontally centered */
    margin-top: 9px; /* shift the block to make it vertically centered */
    text-align: center; /* center inline content horizontally */
    line-height: 80px; /* line height must be set for next item to work */
}

img {
    vertical-align: middle; /* presto */
}

Demo here.

Solution 3:

Take a look at this:

http://jsfiddle.net/jESsA/37/

Basically you use float: left to put your boxes inline and a background image instead of an img tag. Because you are using float, you need to clear after to cancel the float effect on other elements.

I changed the DIV tags to A tags so you can have a link on the hole block and keep it simple. But you can keep it as a DIV tag and put an A block inside though (or use JavaScript)