html - 响应式电子邮件 - 媒体查询中心

Question

我有一张 table ，里面有一个标志。

<td class="header" style="padding: 10px 20px 0 10px;">
  <table  align="left" border="0" cellpadding="0" cellspacing="0">  
    <tr>
      <td style="padding: 10px 0 0 10px;">
       <img src="images/logo.png" alt="Logo"/>
      </td>
    </tr>
  </table>
  <!--[if (gte mso 9)|(IE)]>
    <table width="335" align="left" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td>
  <![endif]-->
  <table class="col325" align="right" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 325px;padding-top:10px;">  
    <tr>
      <td height="55" bgcolor="#deecf7" style="text-align:center;color:#000;font-weight:bold;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </td>
    </tr>
  </table>
  <!--[if (gte mso 9)|(IE)]>
        </td>
      </tr>
  </table>
  <![endif]-->
</td>

如您所见，我有 align="left"，但我希望它以移动版本的媒体查询为中心，我如何覆盖 align="left"？

Answer 1

如果你愿意让这个表格“居中”，那么你可以像下面那样做:

<div align="center">
<table border="0" cellpadding="0" cellspacing="0">  
    <tr>
        <td style="padding: 10px 0 0 10px;">
            <img src="images/logo.png" alt="Logo"/>
        </td>
    </tr>
</table>
</div>

因为它会在“中心”显示您的表格，所以它对所有设备都是响应式的。