Yahoo! Mail HTML Email Alignment Issue

Question

I work on HTML email campaign builds on a daily basis and in the past 24 hours I've seen all of my emails aligning left. This includes the email campaigns I've built previously (which were tested in Yahoo! Mail and used to align center).

Has anyone else come across this? Any ideas what is causing it and whether there is a fix that can be added?

The standard coding used is tables with align center. This now doesn't work and all tables align left it seems.

Answer 1

I've found a solution for this.

On the outer-most 100% width and centrally aligned table add this code:

style="table-layout: fixed;"

This should fix it.

Answer 2

Add a class to the style block in the head of the email.

.table-center { table-layout: fixed; margin: 0 auto; }

Add this class to the outermost table to get the body centered in the window. Then add it to descendant tables as needed for center alignment.

Answer 3

I tried both of the solutions provided and neither was able to solve the problem. I believe there is a larger issue – Yahoo! mail wraps the email in several div tags, one with a class of "body". This div is given a width value of "auto".

When I change this value, via Chrome developer tools, from "auto" to "100%" it fixes the problem.

Unmodified:

"Fixed":

Because this div is outside of the reach of my style block in the head of the email I do not believe this issue can actually be fixed. I would classify this as a bug on Yahoo's part.

Answer 4

I second Ed Johnson's answer here regarding the "fixed; margin: 0 auto;" style on the outer table. I just used this fix instead of the "table-layout: fixed" style because the latter seemed to break my responsive email style.