Question

我最近开始使用基础框架和电子邮件简报。我可以看到，我必须回到旧桌子。我无法理解为什么我有一个中心/对齐徽标这么大的问题？

徽标悬挂在左侧，而不是中心。我在桌子上设置了一个边框，所以看起来很容易。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>A title</title>
  <link rel="stylesheet" href="css/foundation-emails.css" />

<style type="text/css">

</style>
</head>

<body>
  <!-- <style> -->
  <table class="body" data-made-with-foundation>
    <tr>
      <td class="float-center" align="center" valign="top" style="border: 1px solid pink">
        <center>
          <table class="container" align="center" style="border: 1px solid green">
            <tbody>
              <tr>
                <td>
                  <table class="row">
                    <tbody>
                      <tr>
                        <th class="small-12 large-12 columns first">
                          <table>
                            <tr>
                              <th>
                                <img src="https://i1.wp.com/1stwebdesigner.com/wp-content/uploads/2016/04/line-art-logo.jpg?fit=600%2C400&resize=350%2C200" style="border:1px solid red" align="center">
                              </th>
                              <th class="expander"></th>
                            </tr>
                          </table>
                        </th>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </center>
      </td>
    </tr>
  </table>
</body>
</html>

Answer 1

最后，经过2小时的搜索，我找到了答案：

https://foundation.zurb.com/emails/docs/alignment.html

Answer 2

首先，您的文档（！DOCTYPE）不是 XHTML 。您需要使用过渡或 HTML

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

或

<!DOCTYPE html>

之后，你需要：

<img src="https://i1.wp.com/1stwebdesigner.com/wp-content/uploads/2016/04/line-art-logo.jpg?fit=600%2C400&resize=350%2C200" style="border:1px solid red; margin: 0 auto;">

align="center" 不是有效的HTML5属性，它在HTML4 +中有效

表格基础框架中的中心徽标

2 个答案: