What s the best way to center your HTML email content in the browser window or email client preview pane

Question

I normally use CSS rules for margin 0 auto along with a 960 container for my standard browser based content  but I m  new to HTML email creation and I ve got the following design that I d like to now center in the browser window without standard CSS   http   static helpcurenow org mockups emails 2010 may-survey survey html  I seem to recall seeing somewhere that it can also be accomplished by wrapping your email table design in an outer table set to width 100  and using some inline style for text-align center on the tbody or something like this to do it   Is there a best practice for this

User · Answer

CSS in emails is a pain  You ll probably need tables unfortunately  because CSS is not greatly supported in all email clients   That said  use an HTML Transitional DOCTYPE  not XHTML  and use  lt center gt

User · Answer

To center the table in the middle of the email use  lt table width  quot 100  quot  align  quot center quot  border  quot 0 quot  cellspacing  quot 0 quot  cellpadding  quot 0 quot  gt       lt tr gt           lt td gt              Your Content          lt  td gt       lt  tr gt   lt  table gt   To align the content in the middle use   lt table width  quot 100  quot  border  quot 0 quot  cellspacing  quot 0 quot  cellpadding  quot 0 quot  gt       lt tr gt           lt td align  quot center quot  gt              Your Content          lt  td gt       lt  tr gt   lt  table gt

User · Answer

Here s your bulletproof solution    lt table width  100   border  0  cellspacing  0  cellpadding  0  gt     lt tr gt       lt td width  33   align  center  valign  top  style  font-family Arial  Helvetica  sans-serif  font-size 2px  color  ffffff   gt   lt  td gt       lt td width  35   align  center  valign  top  gt        CONTENT GOES HERE      lt  td gt       lt td width  33   align  center  valign  top  style  font-family Arial  Helvetica  sans-serif  font-size 2px  color  ffffff   gt   lt  td gt     lt  tr gt   lt  table gt    Just Try it out  Looks a bit messy  but It works Even with the new Firefox Update for Yahoo mail   doesn t center the email because replace the main table by a div

User · Answer

Align the table to center    lt table width  100   border  0  cellspacing  0  cellpadding  0  gt       lt tr gt           lt td align  center  gt              Your Content          lt  td gt       lt  tr gt   lt  table gt    Where you have  your content  if it is a table  set it to the desired width and you will have centred content

User · Answer

In some cases margin  0 auto  won t cut the mustard when center aligning a html email in Outlook 2007  2010  2013   Try the following   Wrap your content in another table with style  table-layout  fixed   and align    center       lt  -- WRAPPING TABLE -- gt   lt table cellpadding  0  cellspacing  0  border  0  style  table-layout  fixed   align  center  gt     lt tr gt       lt td gt         lt  -- YOUR TABLES AND EMAIL CONTENT GOES HERE -- gt       lt  td gt     lt  tr gt   lt  table gt

User · Answer

table align  center      this aligns the table center of page   Using td align  center  centers the content inside that td  useful for centered aligned text but you will have issues with some email clients centering content in sub level tables so using using td align as a top level method of centering your  container  table on the page is not the way to do it  Use table align instead    Still use your 100  wrapper table too  purely as a wrapper for the body  as some email clients don t display body background colors but it will show it with the 100  table  so add your body color to both body and the 100  table   I could go on and on for ages about all the quirks of html email dev  All I can say is test test and test again  Litmus com is a great tool for testing emails    The more you do the more you will learn about what works in what email clients   Hope this helps

User · Answer

For googlers and completeness sake   Here s a reference I always use when I need to go through the pain of implementing html email-templates or signatures  http   www campaignmonitor com css   I ts a list of CSS support for most  if not all  CSS options  nicely compared between some of the most used email clients    For centering  feel free to just use CSS  as the align attribute is deprecated in HTML 4 01      lt table width  100   border  0  cellspacing  0  cellpadding  0  gt       lt tr gt           lt td style  text-align  center   gt              Your Content          lt  td gt       lt  tr gt   lt  table gt

User · Answer

I was struggling with Outlook and Office365  Surprisingly the thing that seemed to work was    lt table align  center  style  text-align center  gt     lt tr gt       lt td align  center  style  text-align center  gt         lt  -- AMAZING CONTENT  -- gt       lt  td gt     lt  tr gt   lt  table gt    I only listed some of the key things that resolved my Microsoft email issues   Might I add that building an email that looks nice on all emails is a pain  This website was super nice for testing  https   putsmail com   It allows you to list all the emails you d like to send your test email to  You can paste your code right into the window  edit  send  and resend  It helped me a ton

[html-email] What's the best way to center your HTML email content in the browser window (or email client preview pane)?

Examples related to html-email

Examples related to css-tables