Android中心对齐图像答案

【问题标题】：Android center aligns imagesAndroid中心对齐图像
【发布时间】：2016-02-10 14:52:11
【问题描述】：

我有非常简单的 html。这是一个电子邮件标题。我的问题是，它在 iOS 上完美显示，但当我运行实际的电子邮件测试时，Android 中心对齐徽标和按钮。浏览器很好地显示它。它只是电子邮件客户端的变化。徽标应该是左对齐的，橙色按钮是右对齐的。

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;mso-table-lspace:0;mso-table-rspace:0;border-collapse:collapse!important">
  <tr>
    <td valign="top" align="left" width="30%" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;mso-table-lspace:0;mso-table-rspace:0">
      <a href="%%text01%%" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-family:Helvetica,Arial,sans-serif;color:#b5b5b5;font-weight:normal;text-decoration:none">
        <img class="logo" src="http://image.info.olx.co.za/lib/fe9413727563037e74/m/1/121115_logo.png" alt="OLX" style="-ms-interpolation-mode:bicubic;border:0;height:auto;line-height:100%;outline:0;text-decoration:none;">
      </a>
    </td>
    <td class="cta-sell-orange" align="right" valign="center" width="70%" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;mso-table-lspace:0;mso-table-rspace:0">
      <a align="right" style="margin-right: 7px;font-size: 13px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;font-family: Helvetica, Arial, sans-serif;color: #ffffff;font-weight: normal;text-decoration: none;background-color: #ff7800 !important;-moz-border-radius: 3px !important;-webkit-border-radius: 3px !important;border-radius: 2px !important;border: 1px solid #ff6000 !important;display: inline-block !important;cursor: pointer !important;padding: 10px 25px !important; margin: 3px !important; font-weight: bold !important;"
      href="%%text02%%">Sell your item</a>
    </td>
  </tr>
</table>

https://jsfiddle.net/ericpayi/ksgvf7st/

【问题讨论】：

align 不是已弃用吗？
这是用于 HTML 电子邮件，而不是 Web。对齐仍然是电子邮件的必需品。
您能否提供一个屏幕截图，说明它在 Android 上的外观以及它应该是什么样的（可能是 iOS 渲染？）
@Gortonington 我附上了 Android 屏幕截图。 Stackoverflow 不允许我同时附加两者，因为我没有太多的声誉。 OLX 徽标需要左对齐，橙色按钮右对齐。目前，它们都是居中的

标签： android html css html-email

【解决方案1】：

如果你在 PX 中定义你的两个 TD 而不是百分比，它就会出现，它工作正常。我知道在 Android 5.1 中 Table width 100% 存在问题，但之前没有意识到这是一个问题。

请参见下面像素定义代码的屏幕截图：

更新后的代码见下文：

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;mso-table-lspace:0;mso-table-rspace:0;border-collapse:collapse!important">
<tr>
<td valign="top" align="left" width="170" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;mso-table-lspace:0;mso-table-rspace:0">
<a href="%%text01%%" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-family:Helvetica,Arial,sans-serif;color:#b5b5b5;font-weight:normal;text-decoration:none">
<img class="logo" src="http://image.info.olx.co.za/lib/fe9413727563037e74/m/1/121115_logo.png" alt="OLX" style="-ms-interpolation-mode:bicubic;border:0;height:auto;line-height:100%;outline:0;text-decoration:none;">
</a>
</td>
<td class="cta-sell-orange" align="right" valign="center" width="430" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;mso-table-lspace:0;mso-table-rspace:0">
<a align="right" style="margin-right: 7px;font-size: 13px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;font-family: Helvetica, Arial, sans-serif;color: #ffffff;font-weight: normal;text-decoration: none;background-color: #ff7800 !important;-moz-border-radius: 3px !important;-webkit-border-radius: 3px !important;border-radius: 2px !important;border: 1px solid #ff6000 !important;display: inline-block !important;cursor: pointer !important;padding: 10px 25px !important; margin: 3px !important; font-weight: bold !important;" href="%%text02%%">Sell your item</a>
</td>
</tr>
</table>

【讨论】：

很高兴能帮上忙！