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

时间:2016-02-16 13:48:07

标签: html css image email

我试图在HTML电子邮件模板中的图片链接下方放置文字和按钮,下面是附件照片,供我参考:

enter image description here

到目前为止,我有这段代码来显示我的图片:

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

上述卡片是标有&#34; bodyContent&#34;&#34;的表格的一部分。

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

检查下面的代码段。它可能会对你有帮助。

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

答案 2 :(得分:0)

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