Weird Image Alignment Problem in HTML

Ever encounter this problem?



The alignment of your image and the adjacent text seem hard to be aligned. The text is always lower than the lowest part of the image. No matter how you adjust the CSS of the <img>, nothing works.

There is a simple solution to this:

<Table><TR><TD><img src="/image/but1.gif"></TD><TD><a href="[http_address]">Click if you need to click</a></TD></TR></Table>

Changed from the common mistake of mixing image with text next to each other:

<img src="/image/but1.gif"><a href="[http_address]"> Click if you need to click</a>

All you need to do is just to make a table out of it. Separate the image and text and put them into separate table data columns. Problem solved. If you need to further align the text, you can always use valign to adjust the vertical alignment of the text. Anyway, the TD height adjustment won't help as the TDs share the same height unless you create another table inside the TD.



Simple problem. Simple solution but hard to catch.