在图像下定位文本 - HTML 电子邮件答案

【问题标题】：Positioning Text Under Images - HTML Email在图像下定位文本 - HTML 电子邮件
【发布时间】：2016-05-27 20:05:47
【问题描述】：

我正在尝试在 HTML 电子邮件模板中的图像链接下方放置文本和按钮，下面是附上的照片，以供参考：

到目前为止，我有这个代码来显示我的图像：

<br />
<a href="*LINK*"><img src="*IMAGE*" style="max-width:298px;" id="bodyImage2" mc:label="body_image2" mc:edit="body_image2" mc:allowtext /></a>
<a href="*LINK*"><img src="*IMAGE*" style="max-width:298px;" id="bodyImage3" mc:label="body_image3" mc:edit="body_image3" mc:allowtext /></a>
    </td>
</tr>

上面的卡片是标记为“bodyContent”的表格的一部分。

【问题讨论】：

标签： html css image email

【解决方案1】：

对于 Html 电子邮件，一个基本原则是每个元素都需要分成表格的自己的行/单元格。完成此操作后，使用 td 上的内联 css 样式属性来控制内容的填充、字体样式等。

<table>
    <tr>
        <td style="...">
            <img .../>
        </td>
        <td style="...">
            <img .../>
        </td> 
    </tr>
    <tr>
        <td style="...">
            <p>...</p>
        </td>
        <td style="...">
            <p>...</p>
        </td> 
    </tr>
    <tr>
        <td style="...">
            <button .../>
        </td>
        <td style="...">
            <button .../>
        </td> 
    </tr>
</table>

【讨论】：

【解决方案2】：

检查下面的sn-p。它可能会对你有所帮助。

<table  border=0 cellspacing=0 cellpadding=0 width=700 style="margin: 0 auto;background-color:#FFF6F5;">
  <tr>
    <td width="50%" style="text-align: center;">
      <img src="http://www.demilked.com/magazine/wp-content/uploads/2014/03/surreal-photoshop-images-shelter-animals-sarolta-ban-thumb290.jpg" />
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, w</p>
      <button>Click Me</button>
    </td>
    <td width="50%" style="text-align: center;">
      <img src="http://www.onesmallseed.com/wp-content/uploads/2012/12/HOMEPAGE.jpg" />
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, w</p>
      <button>Click Me</button>
    </td>
  </tr>
</table>

【讨论】：

【解决方案3】：

使用 HTML 电子邮件，不幸的是，您正在谈论表格、表格和更多表格。回到未来，对吧？对样式的支持，特别是对布局至关重要的样式元素在电子邮件客户端之间存在很大差异。同样支持表单，因此请确保您的“按钮”是文本元素或锚标记内的图像。试试这样的：

<table>
<tr><td>image1</td><td>image2</td></tr>
<tr><td align="center" valign="top">blurb1</td><td align="center"  valign="top">blurb2</td></tr>
<tr><td align="center" valign="top">button code1</td><td align="center" valign="top">button code2</td></tr>
</table>

【讨论】：