CODEWITHSUNDEEP
htmlcssoutlook
Phoenix
Phoenix

Reputation: 467

How to vertically align text next to an image in outlook

I've found multiple post for aligning text next to an image, it works but at the same time it doesn't work. When gmail renders the html code, it renders it perfectly. When outlook renders the html code, the vertical alignment is off.

May I get some suggestions of how to get text and images to vertically align in a row in both gmail and outlook. 

<td>
    <div>
        <img src="..." style="height:24px; width:33px; vertical-align:middle;" />

        <span>Test</span>
    </div>
    <div>
        <img src="..." style="height:24px; width:33px; vertical-align:middle;" />

        <span>Test</span>
    </div>
</td>

Upvotes: 0

Views: 2249

Answers (1)

James Allen
James Allen

Reputation: 1019

Email client compatibility is like cross-browser compatibility on a steroid induced rampage. I would suggest going old school with a TABLE to achieve the effect you want. Dated HTML practices tend to fare well in email clients. 

<table>
  <tbody>
    <tr>
      <td>
        <img src="http://via.placeholder.com/150" />
      </td>
      <td>Hello world!</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions