电子邮件模板和前景
[英]E-mail template and outlook
问题描述
I'm having immense trouble with a client email template that I have to fix. 
我在必须解决的客户端电子邮件模板上遇到了很大的麻烦。
The client tells me, that the banner image in outlook is not center aligned, but is aligned to the left... I can't figure out why Outlook does this, so typing here is my last resort, and I hope some with more experience in email templates can see the problem and hopefully guide me to a fix. 客户告诉我，Outlook中的横幅图像不是居中对齐，而是向左对齐...我不知道为什么Outlook会这样做，所以在这里键入是我的最后选择，我希望其中的更多内容电子邮件模板方面的经验可以发现问题，并希望可以指导我解决问题。 The template is made with foundation for emails. 该模板是基于电子邮件的基础。
Here is a picture of the problem in Outlook(the image is not center aligned): 这是Outlook中问题的图片（图像未居中对齐）：
CODE: 码：
https://jsfiddle.net/eahjs8sc/ https://jsfiddle.net/eahjs8sc/
I had to make a fiddle because there was to many lines of code. 我不得不摆弄一个小提琴，因为有很多行代码。 The banner is at the top at least. 标语至少在顶部。 The code listed is not the complete document. 列出的代码不是完整的文档。
Thank you. 谢谢。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Columbus mail</title> <style type="text/css"> @media only screen { html { min-height: 100%; background: #f3f3f3 } } @media only screen and (max-width:596px) { .small-float-center { margin: 0 auto!important; float: none!important; text-align: center!important } .small-text-center { text-align: center!important } .small-text-left { text-align: left!important } .small-text-right { text-align: right!important } } @media only screen and (max-width:596px) { table.body table.container .hide-for-large { display: block!important; width: auto!important; overflow: visible!important } } @media only screen and (max-width:596px) { table.body table.container .row.hide-for-large { display: table!important; width: 100%!important } } @media only screen and (max-width:596px) { table.body table.container .show-for-large { display: none!important; width: 0; mso-hide: all; overflow: hidden } } @media only screen and (max-width:596px) { .margin-b-space { margin-bottom: 15px!important } img.float-left, img.float-right { margin: 0 auto; Margin: 0 auto; float: none; text-align: center } table.body img { width: auto!important; height: auto!important } table.body center { min-width: 0!important } table.body .container { width: 95%!important } table.body .column, table.body .columns { height: auto!important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 28px!important; padding-right: 28px!important } table.body .column .column, table.body .column .columns, table.body .columns .column, table.body .columns .columns { padding-left: 0!important; padding-right: 0!important } table.body .collapse .column, table.body .collapse .columns { padding-left: 0!important; padding-right: 0!important } td.small-1, th.small-1 { display: inline-block!important; width: 8.33333%!important } td.small-2, th.small-2 { display: inline-block!important; width: 16.66667%!important } td.small-3, th.small-3 { display: inline-block!important; width: 25%!important } td.small-4, th.small-4 { display: inline-block!important; width: 33.33333%!important } td.small-5, th.small-5 { display: inline-block!important; width: 41.66667%!important } td.small-6, th.small-6 { display: inline-block!important; width: 50%!important } td.small-7, th.small-7 { display: inline-block!important; width: 58.33333%!important } td.small-8, th.small-8 { display: inline-block!important; width: 66.66667%!important } td.small-9, th.small-9 { display: inline-block!important; width: 75%!important } td.small-10, th.small-10 { display: inline-block!important; width: 83.33333%!important } td.small-11, th.small-11 { display: inline-block!important; width: 91.66667%!important } td.small-12, th.small-12 { display: inline-block!important; width: 100%!important } .column td.small-12, .column th.small-12, .columns td.small-12, .columns th.small-12 { display: block!important; width: 100%!important } table.body td.small-offset-1, table.body th.small-offset-1 { margin-left: 8.33333%!important; Margin-left: 8.33333%!important } table.body td.small-offset-2, table.body th.small-offset-2 { margin-left: 16.66667%!important; Margin-left: 16.66667%!important } table.body td.small-offset-3, table.body th.small-offset-3 { margin-left: 25%!important; Margin-left: 25%!important } table.body td.small-offset-4, table.body th.small-offset-4 { margin-left: 33.33333%!important; Margin-left: 33.33333%!important } table.body td.small-offset-5, table.body th.small-offset-5 { margin-left: 41.66667%!important; Margin-left: 41.66667%!important } table.body td.small-offset-6, table.body th.small-offset-6 { margin-left: 50%!important; Margin-left: 50%!important } table.body td.small-offset-7, table.body th.small-offset-7 { margin-left: 58.33333%!important; Margin-left: 58.33333%!important } table.body td.small-offset-8, table.body th.small-offset-8 { margin-left: 66.66667%!important; Margin-left: 66.66667%!important } table.body td.small-offset-9, table.body th.small-offset-9 { margin-left: 75%!important; Margin-left: 75%!important } table.body td.small-offset-10, table.body th.small-offset-10 { margin-left: 83.33333%!important; Margin-left: 83.33333%!important } table.body td.small-offset-11, table.body th.small-offset-11 { margin-left: 91.66667%!important; Margin-left: 91.66667%!important } table.body table.columns td.expander, table.body table.columns th.expander { display: none!important } table.body .right-text-pad, table.body .text-pad-right { padding-left: 10px!important } table.body .left-text-pad, table.body .text-pad-left { padding-right: 10px!important } table.menu { width: 100%!important } table.menu td, table.menu th { width: auto!important; display: inline-block!important } table.menu.small-vertical td, table.menu.small-vertical th, table.menu.vertical td, table.menu.vertical th { display: block!important } table.menu[align=center] { width: auto!important } } @media only screen and (min-width:596px) { .globus { margin-top: 25px } } </style></head><body style="-moz-box-sizing:border-box;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-webkit-text-size-adjust:100%;Margin:0;box-sizing:border-box;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;line-height:14px;margin:0;min-width:100%;padding:0;text-align:left;width:100%!important"> <table class="body" style="Margin:0;background:#f3f3f3;border-collapse:collapse;border-spacing:0;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;height:100%;line-height:14px;margin:0;padding:0;text-align:left;vertical-align:top;width:100%"> <tbody> <tr style="padding:0;text-align:left;vertical-align:top"> <td class="center" align="center" valign="top" style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;hyphens:auto;line-height:14px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"> <table class="container float-center" style="Margin:0 auto;background:#fff;border-collapse:collapse;border-spacing:0;float:none;margin:0 auto;padding:0;text-align:center;vertical-align:top;width:595px"> <tbody> <tr style="padding:0;text-align:left;vertical-align:top"> <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;hyphens:auto;line-height:14px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"> <table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%"> <tbody> <tr style="padding:0;text-align:left;vertical-align:top"> <th style="Margin:0;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;line-height:14px;margin:0;padding:0;text-align:left"><img src="http://www.columbusitonline.dk/pics/kunde-hos-columbus.jpg" alt="kunde hos columbus" width="595" height="236" class="float-center" style="-ms-interpolation-mode:bicubic;Margin:0 auto;clear:both;display:block;float:none;margin:0 auto;max-width:100%;outline:0;text-align:center;text-decoration:none;width:auto" align="center"></th> </tr> </tbody> </table> <table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%"> <tbody> <tr style="padding:0;text-align:left;vertical-align:top"> <th class="large-4 columns first" style="Margin:0 auto;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;line-height:14px;margin:0 auto;padding:0;padding-left:28px;padding-right:8px;text-align:left;width:177.33px"> <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"> <tbody> <tr style="padding:0;text-align:left;vertical-align:top"> <th style="Margin:0;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;line-height:14px;margin:0;padding:0;text-align:left"> <p class="text-align-right" style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;line-height:14px;margin:0;margin-bottom:10px;padding:0;text-align:left">Maj 2016</p> </th> </tr> </tbody> </table> </th> <th class="large-4 columns last" style="Margin:0 auto;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;line-height:14px;margin:0 auto;padding:0;padding-left:8px;padding-right:28px;text-align:left;width:177.33px"> <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"> <tbody> <tr style="padding:0;text-align:left;vertical-align:top"> <th style="Margin:0;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;line-height:14px;margin:0;padding:0;text-align:left"> <p class="text-right" style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;line-height:14px;margin:0;margin-bottom:10px;padding:0;text-align:right"><a href="http://analytics.columbusglobal.com/columbusglobalcom-a10wp/pages/ku6dddaieese1aavxf9npg.html" style="Margin:0;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left;text-decoration:none">Tilmeld en kollega</a></p> </th> </tr> </tbody> </table> </th> </tr> </tbody> </table> <table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%"> <tbody> <tr style="padding:0;text-align:left;vertical-align:top"> <th class="padder" style="Margin:0;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;line-height:14px;margin:0;padding:0;padding-left:28px;padding-right:28px;text-align:left"> <hr class="style-dashed" style="Margin:20px auto;background:#999;border:0;border-bottom:1px dashed #ccc;border-left:0;border-right:0;border-top:0;clear:both;height:0;margin:20px auto;max-width:595px"> </th> </tr> </tbody> </table> <table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%"> <tbody> <tr style="padding:0;text-align:left;vertical-align:top"> <th class="small-12 large-6 columns first" style="Margin:0 auto;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;line-height:14px;margin:0 auto;padding:0;padding-left:28px;padding-right:8px;text-align:left;width:274px"> <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"> <tbody> <tr style="padding:0;text-align:left;vertical-align:top">
1 个解决方案
解决方案1
1 已采纳 2016-06-28 07:16:31
在放置图像的TH中 ，有内联css text-align:left使其成为text-align:center ，它将起作用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
HTML电子邮件模板-Outlook忽略元素的宽度 - Html e-mail template - Outlook ignore width of elements
使用电子邮件模板的Outlook应用程序中的媒体查询支持 - Media Query support in Outlook app using E-mail template
HTML电子邮件模板 - HTML e-mail template
在Outlook中错误显示html电子邮件 - Wrong display of html e-mail in Outlook
响应式HTML电子邮件：outlook - Responsive html e-mail: outlook
通过Outlook发送HTML电子邮件 - Sending a HTML E-mail through outlook
HTML电子邮件模板居中 - HTML E-mail Template Centering
实现电子邮件模板的通缉布局 - Achieving wanted layout for e-mail template
如何创建HTML电子邮件模板？ - How to create a HTML e-mail template?
使用PHP mail（）函数在Outlook中使用HTML电子邮件 - HTML e-mail in outlook using PHP mail() function
相关标签