咨询:邮件表格单元格图片居中,设置text-align:left无效如何左对齐
如何让邮件表格中的图片左对齐?
邮件客户端的CSS支持一直是个大坑,尤其是对齐样式,经常会出现外部样式不生效的情况。你遇到的问题,核心原因是邮件客户端大多不优先识别外部样式,而且<th>标签默认自带居中对齐,所以你之前加的外部text-align:left根本没被客户端识别到。
给你几个实测有效的解决办法:
- 直接给表格单元格(
<th>)加内联text-align样式:把你的<th class="tg-yw4l">改成<th class="tg-yw4l" style="text-align: left;">,这是最关键的一步,因为<th>默认是居中的,必须直接在元素上覆盖这个样式。 - 给图片本身也添加内联对齐样式:在每个
<img>标签里加上style="text-align: left; display: inline-block;",双重保险,避免某些顽固的客户端(比如Outlook)还是继承单元格的默认样式。
修改后的完整代码示例:
.tg {border-collapse:collapse;border-spacing:0;} .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;} .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;} .tg .tg-yw4l { vertical-align: top; } img {max-width:100%;} @media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;}} <div class="tg-wrap"> <table class="tg"> <tr> <th class="tg-yw4l" style="text-align: left;"> <a href="http://www.highprofile-properties.co.uk/"><img src="https://i.imgur.com/ap6gok8.png" style="text-align: left; display: inline-block;"></a> </th> <th class="tg-yw4l" style="text-align: left;"> <img src="https://i.imgur.com/5YgxaJ3.png" style="margin-top: 5px;margin-bottom:25px; text-align: left; display: inline-block;"><br> <img src="https://i.imgur.com/hYv3F1R.png" style="margin-bottom:5px; text-align: left; display: inline-block;"><br> <img src="https://i.imgur.com/hYv3F1R.png" style="margin-bottom:5px; text-align: left; display: inline-block;"><br> <img src="https://i.imgur.com/acXC4op.png" style="margin-bottom:5px; text-align: left; display: inline-block;"><br> <img src="https://i.imgur.com/uQVx0nh.png" style="text-align: left; display: inline-block;"> </th> </tr> </table> <div style="max-width:600px;font-family:Arial, sans-serif;font-size:12px;color:#838383;"> <p>The information in this message is confidential and may be legally privileged. It is intended solely for the addressee. Access to this message by any other person is not permitted. If you are not the intended recipient, any disclosure, copying, distribution or any action taken or omitted to be taken in reliance on it, is prohibited and may be unlawful.</p> </div> </div>
另外补充个小技巧:写邮件模板的时候,尽量把所有样式都内联到元素上,不要依赖外部<style>或者类选择器,因为很多邮件客户端会过滤掉外部样式。如果觉得手动加内联麻烦,可以用一些邮件模板工具自动转成内联样式,能省不少事。
内容的提问来源于stack exchange,提问作者liam geary
相关产品推荐
相关产品推荐

