BK
2
Text and image vertically centered in one row cell?
Hello,
I'm having trouble getting a line of text that has an image betweeen the first and second word to line up vertically within one row of a table. This is a single row within the main container; I am using the fluid hybrid method from Nicole Merlin.
I tried vertical align middle, valign and anything else I could think of. But no luck.
It seems to be working every but Outlook 2007+. Here's my code.
<tr>
<td valign="middle" bgcolor="#e2f4ff" style="padding:0">
<table width="100%" align="center" border="0" style="border-spacing:0;font-family:sans-serif;color:#333333;">
<tr>
<td valign="middle" lang="title" style="vertical-align: middle !important;padding:0;text-align:left;padding-bottom: 5px !important;color: #17a0ce;font-weight: bold; Margin:0;font-size:26px; text-align: center;">
<span>THE</span>
<img width="15%" style="vertical-align: middle !important;" src="http://thumbs.ebaystatic.com/images/g/eucAAOSwFAZTs0iK/s-l96.jpg" alt="ABC's" /><span> OF SAFE CARE FOR DOGS</span>
</td>
</tr>
</table>
</td>
</tr>
Hi ! Try adding a
align="absmiddle"attribute in your<img>. That should do the trick for Outlook 2007+.Thank you for your suggestion; I tried that with no success :(. Also as a side note, thank you so much for your contributions to this community! While I haven't tried it, your Fab Four Technique sounds very interesting; it inspired me to try and create fluid text using calc(). Edit: I also tried setting a height or width to the cell with the content in it in addition to repeating the vertical-align: middle styles in the two span tags. No luck :(.
Thanks Brandon. I really appreciate it. Try adding a table around your text and image, with a cell for each individual part. The following should do the trick.
This didn't work for me either, but your second suggestion in the replies of adding another table did it! Thanks so much, this was a crazy issue to try to resolve!