How can I middle align both text and image in present in a single td tag for an email to be rendered in outlook?

Question

I am writing html for an email and mock-ups of my footer looks like this:

I am facing issues with the vertical alignment of the last row in this mockup, where company logo follows the "Powered by" text. My <td> tag looks like this which is trying to achieve what is in the above mock-up:

<td height="20" style="height: 20px; vertical-align: middle;" align="center" valign="middle">
  Powered by&nbsp;
  <img valign="middle" src="http://cdn.mcauto-images-production.sendgrid.net/37cafc0cf58b37be/f5b816c0-c7cc-41eb-b01b-21a635204c2b/72x20.png" alt="logo" style="width:71px;height:20px; vertical-align: middle" />
</td>

The code above is not properly middle aligning the text and the logo and producing this for Outlook 2007, although it is working for other mainstream email clients:

You can see that logo and "Powered by" text are not properly aligned in the middle, how can I fix that? Also note that, I cannot use multiple <td> tags inside a <tr> for that purpose because I want horizontal center alignment as well.

Answer 1

My preferred method in these situations is to add a table with no width (equating to width:auto) and utilise table cell vertical alignment which is usually super reliable.

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td valign="middle">
            Powered by&nbsp;
        </td>
        <td valign="middle" align="right" style="width:76px;">
            <img src="https://via.placeholder.com/71x40" alt="logo" style="width:71px;height:40px; vertical-align: middle" />
        </td>
    </tr>
</table>

So no height set on any table cells, literally letting the image's natural height set the height of it's wrapping cell and then the text cell will match it naturally. I've also set the image table cell to be slightly wider than the image and aligned the image to the right to give some space between the two pieces of content.