Centered Image won't stay centered when sent

[Grégoire_Miche2]

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]

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>

[Grégoire_Miche2]

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]

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

[Nicholas_Manojl]

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]

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]

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