Yahoo! Email Mail Alignment Issue

Question

I work daily on creating HTML email campaigns and in the last 24 hours I have seen all my emails align to the left. This includes the email campaigns I created earlier (which were tested on Yahoo! Mail and used to align the center).

Has anyone else come across this? Any ideas what causes it, and is there any fix that can be added?

Standard coding is tables with a center of alignment. This does not work now, and all tables are aligned to the left, it seems.

Answer 1

I found a solution for this.

In the outermost 100% width and center align the table:

style="table-layout: fixed;" 

This should fix it.

Answer 2

Add a class to the style block in the header of the letter.

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

Add this class to the outermost table to get the body in the center. Then add it to the streaming tables if necessary for center alignment.

Answer 3

I tried both provided solutions and none of them could solve the problem. I think there is a big problem - Yahoo! mail wraps email in multiple div tags, one with the "body" class. This div is assigned a width value of "auto".

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

Unmodified:

"Fixed":

Since this div is beyond the reach of my style in the email header, I don’t think this problem can be fixed. I would classify this as a bug in the Yahoo part.

Answer 4

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