Clever Geek Handbook

Vertical alignment of an image in a block with a fixed height

I am 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 is not surprising, but I really need to fix it if possible.

Edited to add: Cannot use tables or background image.

Many thanks

+1


source to share


4 answers


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



Or switch its position to the built-in block and play.

0


source


As much as it pains me to say this and at the risk of being drawn and quartered by the purists 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>
0


source


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

0


source


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

Just for vertical alignment, obviously ...

0


source






More articles:


All Articles