3

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

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

更新：

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

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

更新的代码摘录 10/20/2013：

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

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

4

3 回答 3

3

我知道你提到了它，但你确实需要在桌子上设置一个宽度。另外，删除它，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>

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

于 2013-10-09T20:28:20.370 回答
3

这可能是你的线高，所以我把它拿出来，我认为它有效......
或者你 <td>在你的桌子外面......或者只是用中心包裹孔体......如果这些工作都没有让我知道我会看看更彻底的代码并尝试为您修复它 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body align="center">
    <center>
        <td height="50" align="center"  bgcolor="#5900FF" style="border-collapse:collapse; text-align:center;">
            <div style="display:block; text-align:center;"  >
                <center>
                    <table 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; 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>
                </center>
            </div>
        </td>
    </center>
</body>
</html>
于 2013-10-15T08:18:46.723 回答
1

我可能误读了，但你不能在它周围添加中心标签吗？如果不尝试将其放入 div 中，将其显示为块，然后将边距设置为零。

或者您也可以将其分配为left：50％，top：50％，我相信这也将居中。

对不起，如果我让自己听起来像个白痴，我可能会误读，但如果我没有，我认为这应该会有所帮助。

于 2013-10-09T19:42:47.477 回答