The little you knew about centering display block images. I'm here to point that out
Centering display:block; images could be giving any email marketing developer a headache. Luckily enough, you stumbled upon this page and your headache is about to go away with my little quick fix.
Display block takes the full width of the table cell. However if you place another table in the cell and move the image inside that table without adding any width on the table, the image will still take the full width of the cell but in this case it will be full of the additional table and not of the wrapper cell. Get that? It's gold!
Here is how I do it:
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="border-collapse: collapse;" align="center" valign="bottom"> <table border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td align="center"><img style="font-size:0" src="your-state-of-the-art-image.jpg" width="148" alt="" style="display:block"/></td> </tr> </table> </td> </tr> </table>
Notice the align="center" on the wrapper TD, new inner table and then again on the wrapper TD. This applies not only to center an image but also have it float right - just change align="center" to align="right".
Also something you probably didn't know either is that sometimes you don't even need display: block; on images. Like in this case, I could have lived without it and Gmail still have no issue displaying my email properly.
Happy email coding, I hope you found useful my pro tip!
Your friend, the email snob.