verticle align image problem

[heyo]

Hi guys,

I've got an img inside a div, how can I center it vertically with the div?

This is my code:

Code: Select all

<div style="width:100px; height:200px; line-height:200px; vertical-align:middle">
     <img style="height:135px; vertical-align:middle" src="http://www.whatever.com/1.jpg">
</div>

Thanks

[heyo]

nevermind!

solution found lol:

Code: Select all

<div style="height:200px; line-height:200px;">
       &nbsp;<img style="height:135px; vertical-align:middle" src="http://www.whatever.com/1.jpg">
</div>

[Ronnybob]

Probably the simplest method if you know the height of the image, as you do in your example. Things get more complicated if the height of the content is variable.

top: 50% moves the image down to the half way point, then the negative top margin (half the value of the image height, drags it up to be centrally aligned.

Code: Select all

<div style="width:100px; height:200px; position: relative;">
     <img style="height:135px; position:absolute; top:50%; margin: -68px 0 0 0;" src="http://www.whatever.com/1.jpg">
</div>

Edit: or that