Links are not centering in table cell properly in outlook

Question

According to what email on acid is showing me I am see this where I have some links and text being centered in an email

But here is what it is supposed to look like, most other email clients are showing this properly

The table that these links are in looks like this

<table class="row bg-white">
            <tr>
              <td class="wrapper last">

                <table class="twelve columns footer">
                  <tr>
                    <td class="center">
                      <center>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/d86f2f3e-fb48-4dac-a901-fb2c6e764ded.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/83304962-c8e5-4e51-95cd-ffbb46fd9386.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/8fbfc755-58dd-4ad3-9df6-31df23b9b4e0.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/acbdc917-00a3-421b-a56f-2b03d3f7c72e.png" />
                        </a>
                        <span class="copy">© 2015. All Rights Reserved.</span>
                      </center>
                    </td>
                    <td class="expander"></td>
                  </tr>
                </table><!-- /twelve columns -->

              </td>
            </tr>
          </table><!-- /row -->

I'm using Zurb's ink framework to build this, and here are the css rules I added

.footer a {
    display: inline-block;
  }
  .footer span.copy {
    display: block;
    margin-top: 6px;
    font-size: 10px;
  }
  .footer td.center {
    padding: 30px 0;
  }

I'm adding this JSBin link since there is a lot of CSS manipulation happening from the Ink framework

https://jsbin.com/pewoluwapo/edit?html,output

UPDATE: After trying Gortonington's answer I now get this in outlook

score 0 · Answer 1 · answered Sep 02 '15 at 19:10

0

Add the following rule: http://jsfiddle.net/L9grd3ja/. Tables, by default, shrinkwrap their contents.

table {
    width: 100%;
}

answered Sep 02 '15 at 19:10

DRD

5,557
14
14

Gortonington · Answer 2 · 2015-09-03T12:31:24.630

I think some MSO conditional should solve it for Outlook. You also want to make sure to inline prior to uploading as well (just in case you don't already) to make sure Gmail, etc can read all your CSS.

Below is just MSO conditional and not inlined:

<!doctype html>
<html>
<head>
<style>
.footer a {
    display: inline-block;
  }
  .footer span.copy {
    display: block;
    margin-top: 6px;
    font-size: 10px;
  }
  .footer td.center {
    padding: 30px 0;
  }
  </style>
  </head>
  <body>

<table class="row bg-white">
            <tr>
              <td class="wrapper last">

                <table class="twelve columns footer">
                  <tr>
                    <td class="center">
                      <center>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/d86f2f3e-fb48-4dac-a901-fb2c6e764ded.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/83304962-c8e5-4e51-95cd-ffbb46fd9386.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/8fbfc755-58dd-4ad3-9df6-31df23b9b4e0.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/acbdc917-00a3-421b-a56f-2b03d3f7c72e.png" />
                        </a>
                        <!--[if (mso) | (IE)]></center></td></tr><tr><td><center><![endif]-->
                        <span class="copy">© 2015. All Rights Reserved.</span>
                      </center>
                    </td>
                    <td class="expander"></td>
                  </tr>
                </table><!-- /twelve columns -->

              </td>
            </tr>
          </table><!-- /row -->
          </body>
          </html>

EDIT: In accordance with your comment, I dug into the JSBin of your email and see that the issue is that the images contain "float: left; clear: both; display: block; " as well as "align='left'" which is causing it to left align in the table. There are two options:

1.) remove this code from the CSS or after inlining

2.) Create a defined width table to hold the social media and copyright info. (This is likely the most cross-client compatible solution)

In order to not change any of your exisitng code or the CSS inserted when inlining Zurb INK - I had to create a table inside the TD at 100% to clear the aligns and blocks/floats that were inherit inside the parent table, I then created another nested table inside that to house the social icons and copyright info. Then inside the top TD of that, I created a third nested table to allow the icons to each have their own TD without causing issues or requiring colspan for the copyright below.

See below for example:(after inlining your code)

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
                    <tr>
                    <td align="center">
                    <table width="230" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
                    <tr>
                    <td align="center">
                    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
                    <tr>
                    <td align="center" style="padding:0 5px;">
                            <a href="#" style="color: #2ba6cb; text-decoration: none; display: inline-block;">
                              <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/d86f2f3e-fb48-4dac-a901-fb2c6e764ded.png" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block; border: none;" align="left" /></a>
                              </td>
                              <td align="center" style="padding:0 5px;">
                            <a href="#" style="color: #2ba6cb; text-decoration: none; display: inline-block;">
                              <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/83304962-c8e5-4e51-95cd-ffbb46fd9386.png" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block; border: none;" align="left" /></a>
                              </td>
                              <td align="center" style="padding:0 5px;">
                            <a href="#" style="color: #2ba6cb; text-decoration: none; display: inline-block;">
                              <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/8fbfc755-58dd-4ad3-9df6-31df23b9b4e0.png" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block; border: none;" align="left" /></a>
                              </td>
                              <td align="center" style="padding:0 5px;">
                            <a href="#" style="color: #2ba6cb; text-decoration: none; display: inline-block;">
                              <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/acbdc917-00a3-421b-a56f-2b03d3f7c72e.png" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block; border: none;" align="left" /></a>
                              </td>
                              </tr>
                              </table>
                              </td>
                              </tr>
                              <tr>
                              <td align="center" style="padding:5px;">
                            <span class="copy" style="display: block; margin-top: 6px; font-size: 10px;">© 2015. All Rights Reserved.</span>
                        </td>
                        </tr>
                        </table>
                        </td>
                        </tr>
                        </table>

I tried your code and got a somewhat different output but the links are still the problem point, please see updated question. Also adding a jsbin link — Jordan, Sep 02 '15 at 19:55

score 0 · Answer 3 · answered Sep 02 '15 at 20:56

All email clients have different support just like web browsers, this would suggest outlook doesn't support the center tag.

I would suggest removing the center tag and using a widely supported method instead (align="center"). Also remember to use &copy instead of the actual symbol as it's not always supported either! See more HTML codes here: http://www.ascii.cl/htmlcodes.htm

<table class="row bg-white">
            <tr>
              <td class="wrapper last">

                <table class="twelve columns footer">
                  <tr>
                    <td class="center" align="center">
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/d86f2f3e-fb48-4dac-a901-fb2c6e764ded.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/83304962-c8e5-4e51-95cd-ffbb46fd9386.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/8fbfc755-58dd-4ad3-9df6-31df23b9b4e0.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/acbdc917-00a3-421b-a56f-2b03d3f7c72e.png" />
                        </a><br/>
                        <span class="copy">&copy; 2015. All Rights Reserved.</span>
                    </td>
                    <td class="expander"></td>
                  </tr>
                </table><!-- /twelve columns -->

              </td>
            </tr>
          </table><!-- /row -->

Links are not centering in table cell properly in outlook

3 Answers3