16 Replies Latest reply on Jun 15, 2017 10:49 PM by Tim Ball

    Centered Image won't stay centered when sent

    David Parfitt

      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

        • Re: Centered Image won't stay centered when sent
          David Parfitt

          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?

            • Re: Centered Image won't stay centered when sent
              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.

              1 of 1 people found this helpful
                • Re: Centered Image won't stay centered when sent
                  David Parfitt

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

                • Re: Centered Image won't stay centered when sent
                  Grégoire Michel

                  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

                  3 of 4 people found this helpful
                    • Re: Centered Image won't stay centered when sent
                      David Parfitt

                      Greg, this worked!

                       

                      Thank you very much.

                      Dave

                      • Re: Centered Image won't stay centered when sent
                        David Parfitt

                        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

                          • Re: Centered Image won't stay centered when sent
                            David Parfitt

                            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>

                            1 of 1 people found this helpful
                              • Re: Centered Image won't stay centered when sent
                                Grégoire Michel

                                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

                                  • Re: Centered Image won't stay centered when sent
                                    David Parfitt

                                    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?

                                      • Re: Centered Image won't stay centered when sent
                                        Grégoire Michel

                                        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

                                          • Re: Centered Image won't stay centered when sent
                                            Robin Mazer

                                            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>

                                              • Re: Centered Image won't stay centered when sent
                                                Grégoire Michel

                                                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

                                                2 of 2 people found this helpful
                                    • Re: Centered Image won't stay centered when sent
                                      Nicholas Manojlovic

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

                                    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