2

I'm developing email templates and I need to use display:inline-block but it's not working on gmail and outlook. I just need to align an image with a text and I can't use a table .

Any suggestions to make the display:inline-block work or any other solution that works on outlook and gmail?

this my code:

<div>


  <span style="display:inline-block;">this is not<br/> working:</span>
  <a href="" target="_blank"><img style="vertical-align:middle;" alt="" border="0" src="img.jpg"></a>


</div>

thanks

Rocks
  • 1,145
  • 9
  • 13
xzibit15
  • 61
  • 1
  • 2
  • 7

2 Answers2

2

There's only partial support in Outlook for display:inline-block;. Gmail should work fine.

Outlook 2000–03 Partial. Supports block, inline, list-item, and none.

Outlook 2007–16 Partial. Sometimes supports none.

Outlook Express Partial. Supports block, inline, list-item, and none.

Outlook doesn't support <div>

Outlook doesn't really support <div> Classes and styles You can use them, but styles do not always get applied. I would suggest a table for reliability.

Good luck.

gwally
  • 3,349
  • 2
  • 14
  • 28
1

Try to use float:left in the style of "a" and "span" 

<span style="float:left;">this is not<br/> working:</span>
    <a style="float:left;" href="" target="_blank"><img  alt="" border="0" src="yourImage.jpg"></a>

it works in my code

If it doesn't work on outlook it's because when it comes to rendering HTML, most email clients are primitive and will break a lot of well formed HTML elements.

I would recommend some online resources such as:

How To Code HTML Emails: MailChimp

This SO discussion may be helpful:

What guidelines for HTML email design are there?