html邮件中的中心图像

Question

如何在 html 邮件中居中图像，它也可以在 Outlook 中使用。

我试过这个：

<th align="center">
        <center data-parsed="" class="logo">
            <img src="[%embedded-image(1335);logo.png]" alt="" width="207" height="55" border="0"/>
        </center>
</th>

也试过这样

<p style="text-align: center"><img src="[%embedded-image(1335);logo.png]" alt="" width="207" height="55" border="0"/></>

在浏览器中它看起来不错。但在前景中不是。

什么是可行的解决方案？

谢谢。

Answer 1

<center>已被弃用而支持text-align: center.

已弃用
此功能已从 Web 标准中删除。虽然一些浏览器可能仍然支持它，但它正在被删除。尽可能避免使用它并更新现有代码；请参阅本页底部的兼容性表以指导您的决定。请注意，此功能可能随时停止工作。

参考：<center>- HTML | MDN

考虑使用：

1. text-align: center而不是在元素的包含元素 ( th) 上 img，或
2. display: block; margin: auto在嵌套img元素上

...如下面的嵌入代码片段所示。

代码片段演示：

*:not(code) {
  font-family: arial;
}

code {
  background: #cccccc;
  padding: 3px;
}

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<table style="border: 1px solid gray; width: 600px; border-collapse: collapse;">
  <tr>
    <th align="center" style="border: 1px solid gray; background: whitesmoke; padding: 10px;">
      Using <code>align="center"</code> attribute <sup><small><i class="fa fa-thumbs-o-down"></i> (<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#Attributes" target="_blank">deprecated</a>)</small></sup> on containing element
    </th>
  </tr>
  <tr>
    <th align="center" style="border: 1px solid gray; padding: 10px;">
      <img src="https://placehold.it/207x55" alt="" width="207" height="55" border="0"/>
    </th>
  </tr>
</table>
<br>
<table style="border: 1px solid gray; width: 600px; border-collapse: collapse;">
  <tr>
    <th align="center" style="border: 1px solid gray; background: whitesmoke; padding: 10px;">
      Using <code>text-align:center</code> inline-style property on containing element
    </th>
  </tr>
  <tr>
    <th style="border: 1px solid gray; padding: 10px; text-align: center;">
      <img src="https://placehold.it/207x55" alt="" width="207" height="55" border="0" style="display: inline-block;"/>
    </th>
  </tr>
  <tr>
    <td style="padding: 10px;">
      <p>In most cases declaring <code>text-align: center</code> on the containing parent element is enough since <code>img</code> elements are inheritly <em>inline</em>. But to ensure that this behaviour is consistent across all email clients declare <code>display: inline-block</code> on the nested <code>img</code> as well.</p>
    </td>
  </tr>
</table>
<br>
<table style="border: 1px solid gray; width: 600px; border-collapse: collapse;">
  <tr>
    <th align="center" style="border: 1px solid gray; background: whitesmoke; padding: 10px;">
      Using <code>display: block; margin: auto;</code> inline-style properties on nested <code>img</code>
    </th>
  </tr>
  <tr>
    <th style="border: 1px solid gray; padding: 10px;">
      <img src="https://placehold.it/207x55" alt="" width="207" height="55" border="0" style="margin: auto; display: block;"/>
    </th>
  </tr>
</table>

概括：

要水平居中对齐内联元素，您需要：

1. text-align: center在包含（父）元素上声明

要水平居中对齐块元素，您需要：

1. margin: auto在块元素上声明
2. 确保它被定义为块元素( display: block)
3. 确保定义了指定的宽度 ( width: 207px)

垂直和水平对齐演示：

供参考。

1. 水平对齐（任意元素）
2. 水平对齐（文本元素）
3. 垂直对齐（任意元素）
4. 垂直对齐（文本元素）

Answer 2

<table align="center" width="75%">
    <tr>
        <th>
            <div style="margin: 0 auto; text-align: center;">
                <img align="center" src="[%embedded-image(1335);logo.png]" alt="" width="207" height="55" border="0"/>
            </div>
        </th>
    </tr>
</table>

技巧是使用对齐中心属性使父表固定宽度。

给予margin: 0 auto;是第二个选择。

如果它是常规文本内容，则只能align="center"完成这项工作。像下面这样，

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            Your Content
        </td>
    </tr>
</table>

希望这个有帮助。