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

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 /

应解决您的问题。