在HTML邮件中居中图片

Question

在HTML邮件中居中图片

10

我该如何在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"/></>

在浏览器中看起来很好，但在Outlook中不行。有什么有效的解决方案吗？谢谢。

- Felix

1

尝试使用以下代码：<td align="center">您的内容</td> - core114

你尝试过使用 <td align="center" valign="top"><img></td> 吗？ - the_mishra

没有任何区别 - Felix

请检查以下链接：https://dev59.com/cHE85IYBdhLWcg3wRBVU 和 https://dev59.com/dm_Xa4cB1Zd3GeqP6vHZ - core114

1

center has been deprecated in favour of text-align: center(don't use <center>) - declare this rule as an inline property on the containing element (th) of the img element in question. Then define your img tag as an inline-block by declaring the inline property of display: inline-block - UncaughtTypeError

可能是[如何在浏览器窗口（或电子邮件客户端预览窗格）中居中HTML电子邮件内容的最佳方法？]的重复问题(https://dev59.com/cHE85IYBdhLWcg3wRBVU)。 - dipak_pusti

2个回答

7

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

希望这份资料能够帮到您。

- dipak_pusti

我的完整原始代码 https://gist.github.com/holzfelix/7de401e510b69b3b604216388109810b - Felix

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- UncaughtTypeError · Accepted Answer

<center>已经被弃用，建议使用text-align: center代替。

弃用警告
此功能已从Web标准中删除。虽然某些浏览器仍可能支持它，但正在逐步淘汰。如果可能，请避免使用它并更新现有代码；请参见本页底部的兼容性表格以指导您的决策。请注意，此功能可能随时停止工作。

Ref: <center> - HTML | MDN

考虑使用以下方法：

在包含元素（th）上使用text-align: center，而不是在img元素上使用<center>。
在嵌套的img元素上使用display: block; margin: auto

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

代码演示：

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

概述：

要水平居中一个内联元素，您需要：

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

要水平居中一个块级元素，您需要：

在块级元素上声明margin: auto
确保它被定义为块级元素（display: block）
确保定义了指定的宽度（width: 207px）

垂直和水平对齐演示：

供参考。