table 基础框架中的中心徽标

Question

我最近开始将基础框架与电子邮件通讯一起使用。正如我所看到的，我必须回到那些好的旧桌子上。我不明白为什么 centering/align 一个标志有这么大的问题？

徽标一直挂在左侧，而不是居中。我在表格上设置了边框，这样更容易看到。

<!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。您需要使用 transitional 或 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+[=14中有效=]

table 基础框架中的中心徽标

center logo in table foundation framework

html

css

zurb-foundation