Vert-Align image and text in same TD in Outlook - css

Question

I am trying to vertical-align an image and a text-element (span) within the same TD.
Heres my code:
<table bgcolor="#ff0000" style="background-color: #ff0000;">
<tbody>
<tr>
<td valign="middle" height="20" style="height: 20px; padding: 5px; vertical-align: middle;">
<a href="#">
<img height="20" width="25" style="display: inline; height: 20px; width: 25px; vertical-align: middle;" src="https://s3-eu-west-1.amazonaws.com/files.crsend.com/181000/181395/images/cart.png"/>
<!--#text_line #-->
<span style="vertical-align: middle; color: #fff;"> 10,95€</span>
<!--#/text_line#-->
</a>
</td>
</tr>
</tbody></table>
Example-Image
I cannot seperate the img-element and the text-element into seperate TD's, because it has to be a single anchor-element wrapping both the image and the text. I cannot wrap the TD's with an anchor-element since it is not HTML-valid and won't work in outlook.
Any Suggestions?
Greetings

Answer 1

Set your table border-collapse to collapse, your td padding to 0 and your anchor display to block. In this way, the anchor element will fit completely your td without useless margins. Then just set vertical-align to middle for both img and anchor element to align them on the same line.
<table style="background-color: #ff0000; border-collapse: collapse;">
<tbody>
<tr>
<td style="padding: 0;">
<a href="#" style="display: block; color: #fff; text-decoration: none; padding: 5px;">
<img src="https://s3-eu-west-1.amazonaws.com/files.crsend.com/181000/181395/images/cart.png" style="height: 20px; width: 25px; vertical-align: middle;" />
<!--#text_line #-->
<span style="vertical-align: middle;"> 10,95€</span>
<!--#/text_line#-->
</a>
</td>
</tr>
</tbody>
</table>