Vertically aligning an Image

What is the best way to vertically align a single image so that it works in all browsers? I tried googling it and found several different ways which all seemed to have various issues. What is the best way to do this?

 

just put valign="middle" inside the cell, e.g. <td valign="middle"><img src="path-to-the-image" alt="something" /></td>

It will keep the image floating in the vertical middle of the cell, regardless of the table or cell size.

Hope it helps

 

^ Why are you assuming he's using tables?

 

The "valign" attribute is deprecated in all current recommendations. Use the style property, "vertical-align". The property is supported x-browser for elements displayed as "table-cell" (eg. td or th—IE doesn't support "table-cell" on other elements), and in the anonymous inline-box.

Test case:

<p><img src="som.png" alt="" />qypgj</p>
===========
p {
  border: 1px dotted black;
  }

img {
  vertical-align: top || middle || base-line  || bottom;
  }

Code (markup):

See also, mysterious gaps under images.

cheers,

gary

 

Thanks for the help, I figured out a way to center it with the code below. It seems to work fine but there might be issues with it, please let me know if know of any.

<table height="90%" align="center" valign="middle"><tr><td align="center">
<img src="logo.jpg"/>
</table>

Code (markup):

 

@soulscratch,

See! he's using tables! it's kinda intutions u know ;-)