Question

我在使用客户端电子邮件模板方面遇到了巨大的麻烦。

客户告诉我，outlook中的横幅图片不是居中对齐，而是左边对齐...我无法弄清楚为什么Outlook这样做，所以在这里打字是我最后的选择，我希望有一些在电子邮件模板方面有更多经验的人可以看到问题并希望能指导我修复。该模板是用电子邮件的基础。

以下是Outlook中问题的图片（图片未居中对齐）：

CODE：

https://jsfiddle.net/eahjs8sc/

我不得不做一个小提琴，因为有很多行代码。旗帜至少在顶部。列出的代码不是完整的文档。

谢谢。

<!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">

Answer 1

在您已放置图片的 TH 中，内嵌css text-align:left使其成为text-align:center并且它将起作用。

电子邮件模板和展望

1 个答案: