2

I'm creating an HTML email signature and for some reason I'm having an issue with aligning an image and some text in the middle vertically. I am looking at my signature by opening the HTML in Chrome/Gmail which both act the same and then separately in Outlook to check for compatibility issues. The vertical alignment doesn't work in either but do output slightly differently.

I'd like a solution to vertical align the image and text together in the middle vertically for both Chrome/Gmail and Outlook.

I've tried lots of different vertical align methods such as using line-height, vertical-align, height and display properties on various elements but they don't make any difference.

Below is my code:

<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="margin: 20px 0;width: 600px; border-collapse: collapse;">
    <tr>
        <td cellspacing="0" cellpadding="0" border="0" width="180" height="22" style="font-family: Urbanist, Arial, sans-serif; text-align: left; font-size:16px; font-weight: 400; color: #000; padding: 0 0 0 20px;">
            <p style="margin: 0;"><img src="/assets/signature/phone.png" width="22" height="22" style="margin: 0 5px 0 0; width: 22px; height: 22px;" /> XXXXX XXXXXX</p>
        </td>
        <td cellspacing="0" cellpadding="0" border="0" width="240" height="22" style="font-family: Urbanist, Arial, sans-serif; text-align: center; font-size:16px; font-weight: 400; color: #000;">
            <p style="margin: 0;"><span style="text-decoration: none!important; color: #000!important;"><img src="/assets/signature/email.png" width="22" height="22" style="margin: 0 5px 0 0; width: 22px; height: 22px;" /> email@email.co.uk</span></p>
        </td>
        <td cellspacing="0" cellpadding="0" border="0" width="180" height="22" style="font-family: Urbanist, Arial, sans-serif; text-align: right; font-size:16px; font-weight: 400; color: #000; padding: 0 20px 0 0;">
            <p style="margin: 0;"><img src="/assets/signature/web.png" width="22" height="22" style="margin: 0 5px 0 0; width: 22px; height: 22px;" /> www.domain.com</p>
        </td>
    </tr>
</table>

This is my output in Chrome/Gmail: 1

This is my output in Outlook: 2

Dharman
  • 30,962
  • 25
  • 85
  • 135
Lewis Hardisty
  • 91
  • 1
  • 1
  • 5
  • Not sure who closed this but the answer is to a web browser context not a HTML email context, so that close is wrong. – Nathan May 01 '22 at 22:21
  • Since I can't add an answer, I will attempt to explain what to do here. Basically, it will be easiest to control the different heights when the icon and text is separate. So put them in separate tds. Then, use vertical-align on the image (top/middle/bottom) - will fix consistency problem; line-height and font-size on the text, and padding on the td as needed. That should be it. – Nathan May 01 '22 at 22:26

1 Answers1

-1

What about:

table tr {
  display: flex;
  align-items: center;
}

?

Roee Hoobian
  • 1
  • 1