Centered Image won't stay centered when sent

Parfitt_David · ‎05-25-2017

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

Grégoire_Miche2 · ‎05-26-2017

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

View solution in original post

Anonymous · ‎06-15-2017

as a side note

A great way to test for Outlook rendering of emails is to open your email in Microsoft Word.

Word and outlook use the same render engine. it is not perfect but it can sometimes be useful when trying to trouble shoot.

have alook at this article

A Guide To Rendering Differences In Microsoft Outlook Clients

Tim

Parfitt_David · ‎05-26-2017

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?

Grégoire_Miche2 · ‎05-26-2017

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

Nicholas_Manojl · ‎06-15-2017

I don't love this answer..

I'd rather create a table of three cells, and have the table take up 100% width, cell 1 take up 33% and cell 3 take up 33%.

Grégoire_Miche2 · ‎06-15-2017

Hi Nicholas,

The problem with this independent table is that the images might not be aligned with their respective columns. Nothing prevents to set each <td> in each row to have a 33% width.

-Greg

Parfitt_David · ‎05-31-2017

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 · ‎05-31-2017

This might be it...

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

</table>

Grégoire_Miche2 · ‎06-01-2017

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 · ‎06-01-2017

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?

Grégoire_Miche2 · ‎06-02-2017

Hi David,

3 tables, 1 cell each all placed together horizontally will break on Outlook. Welcome to the world of responsive email development

It really takes a developer or the use of a template development service.

-Greg

Anonymous · ‎06-15-2017

Greg, could you help me figure out where to put the code to center the images in the middle of my 3x3 table? Thank you so much!

<tbody>

<tr>

<td style="text-align: center;"><span style="font-size: 14px;"><strong>XYZ Case Study</strong></span></td>

<td style="text-align: center;"><span style="font-size: 14px;"><b>XYZ PPT Template</b></span></td>

<td style="text-align: center;"><span style="font-size: 14px;"><strong>XYZ Whitepaper</strong></span></td>

</tr>

<tr>

</tr>

<tr>

<td style="text-align: center;">Find out in this <a href="https://xxx.pdf" target="_blank" style="color: #298fc2; text-decoration: underline;">case study</a> how.</td>

<td style="text-align: center;">Showcase in your presentations by downloading the new;<a href="https://xxx.aspx" target="_blank" style="color: #298fc2; text-decoration: underline;">PPT template</a>.<br /></td>

<td style="text-align: center;">Our customers can learn more in this <a href="httpsxxx.pdf" target="_blank" style="color: #298fc2; text-decoration: underline;">whitepaper</a> about a framework for.</td>

</tr>

</tbody>

</table>

Grégoire_Miche2 · ‎06-15-2017

Each image should be in their own nested table, itself centered in its td.

<table align="center" cellpadding="5" cellspacing="5" style="width: 100%; height: 230px; margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="text-align: center;">
<span style="font-size: 14px;">
<strong>
XYZ Case Study
</strong>
</span>
</td>
<td style="text-align: center;">
<span style="font-size: 14px;">
<b>
XYZ PPT Template
</b>
</span>
</td>
<td style="text-align: center;">
<span style="font-size: 14px;">
<strong>
XYZ Whitepaper
</strong>
</span>
</td>
</tr>
<tr>
<td>
<table align="center" style="etxt-align:center;">
<tr>
<td>
<img src="http://info.xxx.com/rs/689-LLU-525/images/XYZ Case Study.PNG" alt="Case Study.PNG" height="169" width="200" constrain="true" imagepreview="false" style="display: block; margin-left: auto; margin-right: auto;" />
</td>
</tr>
</table>
</td>
<td>
<table align="center" style="etxt-align:center;">
<tr>
<td>
<img src="http://info.xxx.com/rs/689-LLU-525/images/PPT Template.PNG" alt="PPT.PNG" height="112" width="200" constrain="true" imagepreview="false" style="display: block; margin-left: auto; margin-right: auto;" />
</td>
</tr>
</table>
</td>
<td>
<table align="center" style="etxt-align:center;">
<tr>
<td>
<img src="http://info.xxx.com/rs/689-LLU-525/images/.PNG" alt="Framework.PNG" height="180" width="200" constrain="true" imagepreview="false" style="display: block; margin-left: auto; margin-right: auto;" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="text-align: center;">
Find out in this
<a href="https://xxx.pdf" target="_blank" style="color: #298fc2; text-decoration: underline;">
case study
</a>
how.
</td>
<td style="text-align: center;">
Showcase in your presentations by downloading the new;
<a href="https://xxx.aspx" target="_blank" style="color: #298fc2; text-decoration: underline;">
PPT template
</a>
.<br />
</td>
<td style="text-align: center;">
Our customers can learn more in this
<a href="httpsxxx.pdf" target="_blank" style="color: #298fc2; text-decoration: underline;">
whitepaper
</a>
about a framework for.
</td>
</tr>
</tbody>
</table>

-Greg

Anonymous · ‎06-15-2017

I cannot thank you enough - it's perfect! Really appreciate the help.

Parfitt_David · ‎05-26-2017

Greg, this worked!

Thank you very much.

Dave

Chris_Johnston · ‎05-26-2017

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 · ‎05-26-2017

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!!!