Search code examples
htmlcssoutlookhtml-email

Image & text side by side inside <td> outlook it's not working fine


In Outlook image & text are not aligned properly. Text is coming down but in browser view it's showing up absolutely fine.

I tried adding valign & vertical-algin middle but doesn't works for me might be I need to add some conditional coding as I have the latest version of outlook

The alignment works fine in browser but not in outlook

<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
  <tbody>
    <tr>
      <td bgcolor="#4f2d7f" class="stack-column-center" dir="ltr" style="padding: 12px; font-size: 14px;  font-family: Arial;  color: rgb(255, 255, 255);  font-weight: bold; line-height: 1.2em;  text-align: center;" width="298">
        <img height="45" src="https://app.clickdimensions.com/blob/usgtcom-a4hdv/files/internet_white_teal.png?1563370289884" style="margin: 5px;vertical-align: middle;width:25px;height: 40px;" width="25" />
        <span style="vertical-align: middle;">Monday, July 15, 2019 | 2:00 pm ET</span>
      </td>
      <td bgcolor="#4f2d7f" class="stack-column-center" dir="ltr" style="padding:12px; font-size: 14px;  font-family: Arial;  color: rgb(255, 255, 255);  font-weight: bold; line-height: 1.2em;  text-align: center;">
        <img height="45" src="https://app.clickdimensions.com/blob/usgtcom-a4hdv/files/internet_white_teal.png?1563370289884" style="margin: 5px;width:25px;vertical-align: middle;height: 40px;" width="25" />
        <span style="vertical-align: middle;">1.5 CPE credits</span>
      </td>
    </tr>
  </tbody>
</table>


Solution

  • I would recommend you creating another table inside that . give it one row with 2 cells and align the content on those to middle. Alternatively try adding display:inline-block to both the image and the span