Question

在将电子邮件顶部的图片置于居中对齐时出现问题。我相信这是一段代码，当浏览器大于520px时，会使图像消失。虽然我需要此代码用于剩余的电子邮件。如何创建例外以使这个特定图像保持中心？

.mobile {
    display: none !important;
    font-size 0 !important;
    max-height: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    mso-hide: all !important;
    overflow: hidden !important;
}
.mobile img {
    max-height: 0 !important;
    width: 0 !important;
}

@media only screen and (max-width: 520px) {
    *[class=hide] {
        display: none !important;
    }
    [class=mobile] {
        display: block !important;
        max-height: none !important;
        margin: 0px !important;
        overflow: visible !important;
    }
    *[class=mobile] img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        max-width: 100% !important;
    }
}

<td class="mobile" style="font-size: 0; mso-hide: all; width:120px; height:24px;"><div align="center"><a href="~PROBE(201)~"><img border="0" height="24" width="120" src="images/MH-logo.png" /></a></div></td>

Answer 1

“对齐”在HTML5中已弃用，浏览器/电子邮件可能不支持。

在你的div中尝试这个

＆lt; div style =“text-align：center”＆gt;

修改

对不起，我应该仔细看看。

最有可能的原因是TD标签缺少完整的HTML。

<table style="width:100%"><tr> <td class="mobile" style="font-size: 0; mso-hide: all; width:120px; height:24px;"><div align="center"><a href="~PROBE(201)~"><img border="0" height="24" width="120" src="images/MH-logo.png" /></a></div></td> </tr></table>

同时

我评论了一切没有意义的事情

<style> .mobile { /* display: none !important; Do Display, No image */ font-size 0 !important; /* max-height: 0 !important; */ /* line-height: 0 !important; */ margin: 0 !important; /* mso-hide: all !important; not CSS , this is Microsoft Office code */ overflow: hidden !important; } .mobile img { /* max-height: 0 !important; no height, No image */ /* width: 0 !important; no width, no image */ } @media only screen and (max-width: 520px) { *[class=hide] { display: none !important; } [class=mobile] { /* display: block !important; */ /* max-height: none !important; */ margin: 0px !important; overflow: visible !important; } *[class=mobile] img { display: block !important; /* width: 100% !important; */ /* height: auto !important; */ /* max-height: none !important; */ max-width: 100% !important; } } </style> <table style="width:100%"><tr> <td class="mobile" style="font-size: 0; XXXXmso-hide: all; width:120px; height:24px;"><div align="center"><a href="~PROBE(201)~"><img border="0" height="24" width="120" src="images/MH-logo.png" /></a></div></td> </tr> </table>

Answer 2

给出一定宽度并添加此css

        /-> C -> D \
A -> B -            -> G (Contain values of D and F, 
        \-> E -> F /

应解决您的问题。

Img不会居中对齐 - 电子邮件

2 个答案: