SOLVED

Centered Image won't stay centered when sent

Go to solution

Re: Centered Image won't stay centered when sent

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
Not applicable

Re: Centered Image won't stay centered when sent

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!

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

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

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

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

Highlighted

Re: Centered Image won't stay centered when sent

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
Not applicable

Re: Centered Image won't stay centered when sent

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

Re: Centered Image won't stay centered when sent

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%.

Re: Centered Image won't stay centered when sent

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

Anonymous
Not applicable

Re: Centered Image won't stay centered when sent

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