Centered Image won't stay centered when sent

[Parfitt_David]

Hello everyone,

I created an email and I inserted an image in the body of the email.  I selected center aligned, and when the "Preview Email" is generated, it looks perfect.  However, when I send the sample, the image gets left aligned.  I am approving the draft before sending the sample, not sure if that is correct or not.

I cant seem to figure this out, any suggestions?

Thank you,

Dave

[Parfitt_David]

UPDATE -- It seems to only be happening in MIcrosoft Outlook.  When I view on my iPhone's Mail app, it is centered.

Any ideas how to fix for Outlook?

[Chris_Johnston]

You have to love outlook and its inability to ever render an email the way you want it to. We always run our emails through emailonacid to make sure that all email clients display it the way we want and outlook is always the one that gives everyone the most headaches.

In order to center an image, you need to use a table instead of "center align" and then put the image in the middle of a 3 column table. Keep in mind that the column width of the center column will need to equal the width of your image.

[Parfitt_David]

Many thanks for your reply!  Interestingly enough, I did try a table. However, I only used a 1 column table, centered it on the page, and fit the image in the cell.  The entire table ended up left-aligning!

Regarding your statement:

Keep in mind that the column width of the center column will need to equal the width of your image.

Can I just make the center cell of the 3 column table big enough to hold the image?

Thanks Chris!!!

[Grégoire_Miche2 · Accepted solution]

Hi David,

The simplest way to center an image in a way that works for every device is to create a table (1 column 1 row) and add the image in the table cell, then center the table.

<table align="center" style="margin: 10px auto;">

     <tr>

          <td>

               <img  src="..." />

          </td>

    </tr>

</table>

-Greg

[Parfitt_David]

Greg, this worked!

Thank you very much.

Dave

[Parfitt_David]

Greg,

Are you able to show me the HTML for a 3 Cell Table that stays centered on the page that I can insert 3 images into? (Similar to the example above, only with three cells, in one row).

Thank you so much,

Dave

[Parfitt_David]

This might be it...

<table align="center" style="margin: 10px auto;">

     <tr>

          <td>

               <img  src="..." />

          </td>

          <td>

               <img  src="..." />

            </td>

             <td>

               <img  src="..." />

            </td>

    </tr>

</table>

[Grégoire_Miche2]

HI David,

Yes, that's it, but this code will not be responsive (meaning the 3 images will not display in columns rather than in rows on mobile devices).

Transforming this in a responsive code requires some CSS and/or VML skills that go beyond what we can cover in a community post.

One good way to start learning it to look into Marketo built in email templates and see how it's done.

-Greg

[Parfitt_David]

Thank you for your feedback -- Is it possible to just use your HTML for a 1 cell table and x3 and place them next to each other horizontally? That way I would have 3 "boxes" with the responsive code but as 3 separate tables next to each other.

Again, I am very limited in my understanding of HTML so if this doesn't make sense, let me know!  Otherwise, if this works, any idea what the code would look like?