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では廃止され、ブラウザ/メールではサポートされない可能性があります。 "：センターテキスト整列" >

EDIT：

申し訳ありませんが、私はより近くに見えているはず

は、あなたのdiv

< divのスタイル=でこれを試してみてください。

ほとんどの理由は、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

margin-left : auto; 
margin-right : auto; 

を追加していない、すべてをコメントアウト。