Vertical-align image in a fixed-height block

问题

I'm trying to BOTTOM align an image in a fixed-height block:

div { float: left; width: 100px; height: 100px; line-height: 100px; }
div img { vertical-align: middle; }

...works in modern browsers, except IE! IE sucks no wonder, but I really need a fix, if possible.

Edited to add: Can't use tables or background image.

Many thanks

回答1:

Why can't you just position:relative the division, position:absolute and mess with bottom/left properties?

Or toggle it's position to inline-block and play around.

回答2:

As much as it pains me to say it and at the risk of being drawn and quartered by the purists out there, the most reliable way to vertically align something in a universally compatible way is to use a table.

table {
    float: left; 
    width: 100px; 
    height: 100px; 
    line-height: 100px;
}

<table cellspacing="0" cellpadding="0">
    <tr>
        <td align="center" valign="bottom"><img src="foo.jpg" /></td>
    </tr>
</table>

回答3:

Simplest way to do this is to use in the DIV style="background:url(...) no-repeat center bottom" instead of IMG tag.

回答4:

I can´t find it right now, but I saw something positioning the element at 50% (the top) and then giving it a negative top-margin of -50%.

Just for the vertical alignment obviously...

来源：https://stackoverflow.com/questions/1478440/vertical-align-image-in-a-fixed-height-block