Foundation-emails: Button Centering

[GBratsos]

How can we reproduce this bug?
Send an email with centered buttons on Yahoo email and open it from Chrome - Windows.
Write out the HTML (or Inky code) that causes the issue.

<container> <row class="thankyou"> <columns small="12" large="8"> <center> <h2><b>Thank you!</b></h2> <p>February was full of great moments and amazing work!</p> <button><a href="#">LET'S TALK</a></button> </center> </columns> </row> </container>

What did you expect to happen?
Button centering

What happened instead?
Button was aligned left.

What email clients does this happen in?
Yahoo email on web-browser.

[tdhartwick]

It looks like the centering works on our end. Here's the litmus test reflecting it: https://litmus.com/pub/84c7bdd

I used Inky to replicate it, which outputs the center tag around around the <a> tag of the button.

Let us know if this doesn't work!

[GBratsos]

Padding on buttons do not work on outlook.com/office365 in browsers. Same markup, can you actually check it? On litmus it seems to work correctly.

[coreyschaaf]

@tdhartwick I am having the exact same issue above. Yahoo has a class of
.undoreset center{
display:block;
text-align:center;
}
It seems that the "text-align:center" attribute is overwriting the center attribute of text-align:-webkit-center; This happens on yahoo chrome for me. using Inspector, if I uncheck the attrbute of text-align:center; and the -webkit-text-align:center is given presidence, the buttons do center.

While I notice your litmus results give you the correct rendering. A real world use case would be to include other content in the container along with the button. I am using windows 8, chrome, yahoo.

Results with email on acid:
https://www.emailonacid.com/app/acidtest/display/summary/ZwTOO3hcifaWFGvWZOsX7WhQzP8uDzQJ4YdevkUs6Vs7M/shared

[ralts00]

Hello, I just CURRENTLY have the same problem , it is not center on yahoo :(

[pk1m]

Anyone figure out a good solution or fix? I'm guessing this was closed because its yahoo's fault?

[coreyschaaf]

@rafibomb @tdhartwick this is still a bug on yahoo for firefox and chrome. Please re-open this.

[pk1m]

Yea this is still an issue. My litmus test also shows that it is correctly centered, but a real-world test will show its not. @coreyschaaf have you found a workaround for this?

[jondcallahan]

Also seeing this issue in yahoo mail across browsers

[seansmyth]

Seeing this too.

[marcpartridge]

I think I’ve found a possible fix?

I was having the issue with both a image and a button that were both wrapped in a <center> tag.

It seem to have fixed it by adding display: inline-block; to the first tag in the center tag.
In the case of the image, it goes straight in the inline styles on the img tag and overriding the display: block;

<img src="img/icon_1.png" align="center" class="float-center icon" style="-ms-interpolation-mode:bicubic;Margin:0 0 10px 0!important;clear:both;display:inline-block;float:none;margin:0 0 10px 0!important;max-width:100%;outline:0;text-align:center;text-decoration:none;width:auto">

In the case of the button, it goes on the first table.

<table class="button float-center" style="Margin:0 0 16px 0;border-collapse:collapse;border-spacing:0;float:none;margin:0 0 16px 0;padding:0;text-align:center;vertical-align:top;width:auto!important;display:inline-block;">

Tested this in a live yahoo account and it seemed to fix the issue. Also tested again in litmus for the other browsers and it still worked as intended.

Can anyone else test this?

[ralts00]

Hey, @marcpartridge thanks!,
I add display: inline-block; on the first table for button:
<table class="button float-center" style="-moz-hyphens:manual!important;-webkit-hyphens:manual!important;Margin:0 0 16px 0;border-collapse:collapse;border-spacing:0;float:none;hyphens:manual!important;margin:0 0 16px 0;padding:0;text-align:center;vertical-align:top;width:auto;word-wrap:normal!important;display:inline-block">

It works perfect: D

It works well in live tests:
Web clients: Gmail, Inbox, Hotmail, Yahoo.
Mobile clients: Gmail, Inbox, iOS Mail, Yahoo.

An extra detail: apparently no need to fix the centering button on the Yahoo app in iOS that works well without the solution.

On the other hand, do not check if it works with the images, since I have never had problems focusing images in the mail from yahoo, always works for me tag <center> or class: float-center.

Thanks :D

[digitalmaster]

I'm still seeing this as well:

<row>
    <columns>
      <callout>
        <row>
          <columns valign="middle" class="callout-signup text-center">
            <center>
              <spacer size="40"></spacer>
              <p class="text-center">placeholder text here</p>
              <button href="#" class="cta-signup large radius" style="display: inline-block;">ipsum test block</button>
              <spacer size="40"></spacer>
            </center>
          </columns>
        </row>
      </callout>
      <center>
        <button href="#" class="large radius" style="display: inline-block;">Button CTA</button>
      </center>
    </columns>
  </row>

[nadalsol]

I've the same issue, when an <img> is wrapped in an <a href="...">, and finally wrapped in a <center> tag.

NO issue occurs:

<row>
  <columns small="12">
    <center>
      <img src="http://placehold.it/70x70" width="35" height="35">
    </center>
  </columns>
</row>

Issue occurs (notice <a href="..."> wrapper):

<row>
  <columns small="12">
    <center>
      <a href="https://www.nba.com" target="_blank">
        <img src="http://placehold.it/70x70" width="35" height="35">
      </a>
    </center>
  </columns>
</row>

Possible fix (just add class="text-center" to image):

<row>
  <columns small="12">
    <center>
      <a href="https://www.nba.com" target="_blank">
        <img src="http://placehold.it/70x70" class="text-center" width="35" height="35">
      </a>
    </center>
  </columns>
</row>