Question

我正在尝试创建一个看起来像文本字体大小的按钮：14px坐在中间位置，带有一个特殊字符（>）font-size：40px;

让右箭头（>）正确地垂直对齐电子邮件似乎是不可能的。

目前我正在使用：

                <table cellpadding="0" cellspacing="0" border="0"> 
                  <tr> 
                    <td bgcolor="#b8237" background="" height="42" width="196" style="color:#FFFFFF; font-family:Arial, Helvetica, sans-serif;font-size:14px;" align="center" valign="middle">  
                      <a href="" alt="Get Your $1.50 Coupon" title="Get Your $1.50 Coupon" target="_blank" style="text-decoration:none;color:inherit;">
                        Get Your $1.50 Coupon 
                        <span style="font-size:40px;">›</span>
                      </a> 
                    </td> 
                  </tr> 
                </table>

非常感谢任何帮助。这需要是电子邮件的防弹。我已经研究并尝试了多种不同的方法，但是空手而归。

此外，没有生成器允许对齐不同的字体大小的文本。

谢谢，

Answer 1

鉴于你希望这是防弹，我对这样的事情的建议是使用图像作为文本和箭头，并只是围绕它包裹锚。否则，试图让每个电子邮件客户端玩球都会是一场噩梦。

如果这需要保留为文本，那么我建议你为文本和箭头创建单独的单元格并将它们设置为vertical-align: middle，但是不可避免地会在客户端产生令人讨厌的不同结果。

Answer 2

以下是更新后的代码：

<table cellpadding="0" cellspacing="0" border="0">
<tr>
    <td bgcolor="#b8237" background="" height="42" width="196" style="color:#FFFFFF; font-family:Arial, Helvetica, sans-serif;font-size:14px;" align="center" valign="middle"> 
        <a href="" alt="Get Your $1.50 Coupon" title="Get Your $1.50 Coupon" target="_blank" style="text-decoration:none;color:inherit;">
            <span>Get Your $1.50 Coupon </span>
            <span style="font-size:40px;">›</span>
        </a> 
    </td>
</tr>

我所做的一切，我在<span>标签中添加了“获取1.50美元优惠券”

我给了CSS：td span{ display:inline-block; vertical-align:middle;}

这是小提琴：http://jsfiddle.net/c237t/

如果你不能给出单独的CSS，那么另一种方法就是这样：

<table cellpadding="0" cellspacing="0" border="0">
<tr>
    <td bgcolor="#b8237" background="" height="42" width="196" style="color:#FFFFFF; font-family:Arial, Helvetica, sans-serif;font-size:14px;" align="center" valign="middle"> 
        <a href="" alt="Get Your $1.50 Coupon" title="Get Your $1.50 Coupon" target="_blank" style="text-decoration:none;color:inherit;">
            <span style="vertical-align:middle;">Get Your $1.50 Coupon </span>
            <span style="vertical-align:middle; font-size:40px;">›</span>
        </a> 
    </td>
</tr>

这是小提琴：http://jsfiddle.net/2X9kS/

如何在电子邮件html中内联显示各种大小的文本

2 个答案: