使表格/文本在 Blackberry OS5 HTML 电子邮件中居中

Question

我们正在尝试了解为什么下面的表格和文本不会以 Blackberry OS5 为中心。我们尝试为表格指定宽度以及许多其他技巧和解决方法。所有其他客户端现在都按预期工作。

除了代码示例之外，我还包含了一个指向我们的 Litmus 测试的链接，其中也包含 HTML 代码。

更新：

尝试了以下答案的多种变体，但无法使表格居中，只有 BB 5OS 上的内容。作为演示隔离，将表格与其内容一起居中是没有问题的，但不是在电子邮件中。

我的电子邮件设计目标是保留相对大小，以便在不读取媒体查询的设备上工作。所以这可以很容易地解决，但不会对当前正确居中的其他客户端产生负面影响。

2013 年 10 月 20 日更新的代码摘录：

  <td height="50" align="center"  bgcolor="#5900FF" style="border-collapse:collapse; text-align:center;">
    <center>
    <div style="display: table; text-align:center;"  >

      <table width="100%"  bgcolor="#FF0004" border="0" align="center" cellpadding="0" cellspacing="0" class="center-type table-greetings" style="display: table; text-align:center;" >


        <tbody style="text-align: center; ">
          <tr>
            <td height="40" align="center" class="center-type" valign="top" style="color: #ffffff; line-height: 30px; font-size: 29px;font-family: 'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: normal; text-align:center; display:block;"><font face="'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;" size="3" style="color: #ffffff; line-height: 30px; font-size: 29px;font-family: 'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: normal;">Wrap Up Your</font></td>
          </tr>
          <tr>
            <td align="center" class="center-type" style="font-size: 29px; color: #F38B00; line-height: 36px; letter-spacing : 11px; font-family: 'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif; text-align:center; margin: 0 auto;"><font size="5" face="'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;" style="font-size: 29px !important; color: #F38B00; line-height: 36px; letter-spacing : 11px; font-family: 'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;  font-weight: bold;">HOLIDAY GREETINGS</font></td>
          </tr>
          <tr>
            <td height="40" align="center" class="center-type" valign="bottom" style="color: #ffffff; line-height: 30px; font-size: 29px;font-family: 'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: normal; text-align:center;  margin: 0 auto;"><font face="'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;" size="3" style="color: #ffffff; line-height: 30px; font-size: 29px;font-family: 'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: normal;">Early This Year</font></td>
          </tr>
        </tbody>
      </table>

      </div>
    </center>
  </td>

2013 年 10 月 20 日更新的石蕊测试：https://litmus.com/pub/bce8f62

Answer 1

我知道您提到过，但您确实需要在桌子上设置宽度。另外，删除margin 0 auto，因为它可能会搞砸。

如果这不起作用，请尝试暂时将 bgcolor 添加到每个元素并测试以调试未扩展的内容。要将某些内容居中，父元素必须是全角的，因此确定哪些不是全角将有助于查明问题。

更新：

为什么不做这样简单的事情呢？

<td width="600">
  <table width="100%" border="0" cellpadding="0" cellspacing="0"  bgcolor="#FF0004">
    <tr>
      <td align="center" style="color: #ffffff; line-height: 30px; font-size: 29px; font-family: 'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: normal;">
Wrap Up Your<br>
<font style="font-size: 29px; color: #F38B00; line-height: 36px; letter-spacing : 11px; font-weight: bold;">HOLIDAY GREETINGS</font><br>
Early This Year
      </td>
    </tr>
  </table>
</td> 

我没有测试它，但是，除非我遗漏了什么，否则这是一个非常直接的居中。