我在处理必须修复的客户电子邮件模板时遇到了很大的麻烦。
客户告诉我，outlook 中的横幅图片没有居中对齐，而是向左对齐...我不明白为什么 Outlook 会这样做，所以在这里输入是我最后的选择，我希望一些在电子邮件模板方面有更多经验的人可以看到问题并希望指导我进行修复。该模板是以电子邮件为基础制作的。
这是 Outlook 中问题的图片(图片未居中对齐):
代码:
https://jsfiddle.net/eahjs8sc/
我不得不弄个 fiddle ，因为代码行太多了。横幅至少在顶部。列出的代码不是完整的文档。
谢谢。
<!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">
最佳答案
在 TH 中，您放置图像的位置具有内联 css text-align:left 使其成为 text-align:center 并且它将工作。
关于html - 电子邮件模板和展望，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38069360/