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

Question

我有一张桌子，里面有一个标志。

<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>

由于它将在"中心"中显示您的表格，因此对于所有设备来说，它将是一种响应式。

Answer 2

诀窍是使用父元素并切换图像表的宽度。

左对齐：

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#DDDDDD">
  <tr>
    <td align="center">
      <table bgcolor="#CCCCCC" width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="left">
           <img src="images/logo.png" width="100px" height="100px" alt="Logo" style="" style="margin: 0; border: 0; padding: 0; display: block;"/>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

现在使用媒体查询来更改内部表的宽度。在这里，我只是将其内联以演示：

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#DDDDDD">
  <tr>
    <td align="center">
      <table bgcolor="#CCCCCC" width="100%" border="0" cellpadding="0" cellspacing="0" style="width:100px !important;">
        <tr>
          <td align="left">
           <img src="images/logo.png" width="100px" height="100px" alt="Logo" style="margin: 0; border: 0; padding: 0; display: block;"/>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 3

所以我让它工作，所以我想我会发布我如何让它工作，以防其他人遇到类似的问题。

这是媒体查询的魔力，可以清除我在以下样式中内联的最大宽度

body[yahoo] .logo{max-width:none !important;text-align: center;}

这是标头的整个 td。

<td class="header" style="padding: 10px 20px 0 10px;">
  <table  align="left" border="0" cellpadding="0" cellspacing="0" class="logo" style="width:100%;max-width:220px;">
    <tr>
      <td style="padding: 10px 0 0 10px;">
       <a href="#"><img src="images/logo.png" alt="Logo"/></a>
      </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>