原谅我如果这是简单的,它是很长时间以来,我把一些HTML一起为电子邮件设计。 我正在做一个模板,我已经收到,并有一个按钮在模板上完美地呈现在浏览器上。
在outlook中它就快到了! 我试图得到块包括链接,而不仅仅是文本,给一个体面的高度,在上面和周围的文本作为一个按钮。 td上的行高达到了块的高度,但是我不能让文本垂直对齐在块的中心。
谁能帮帮我吗?
<tr>
<td style=" background-color:#ffffff;
padding:17px 30px 17px 30px;
text-align: center;
mso-line-height-rule: exactly;
line-height: 28px;
"
>
<a href="https://#"
target="_blank" title="" data-targettype="webpage" data-targetname=""
style=" background-color: #004752;
border-radius: 17px;
display:inline-block;
text-decoration: none;
color: #ffffff;
">
<strong> Some Text </strong>
</a>
</td>
</tr>
将padding
从td
移动到a
并应用display:block'
将获得所需的结果。
null
<tr>
<td style=" background-color:#ffffff;
text-align: center;
mso-line-height-rule: exactly;">
<a href="https://#" target="_blank" title="" data-targettype="webpage" data-targetname="" style=" background-color: #004752;
border-radius: 17px;
display:block;
text-decoration: none;
color: #ffffff;
padding:17px 30px 17px 30px;
line-height: 28px;">
<strong> Some Text </strong>
</a>
</td>
</tr>
有一个技巧,使行高
等于高度
将使文本居中。
你可以阅读更多关于垂直居中的内容。
null
<a href="https://#" target="_blank" title="" data-targettype="webpage" data-targetname="" style=" background-color: #004752;
height: 50px;
line-height: 50px;
border-radius: 17px;
display:inline-block;
text-decoration: none;
color: #ffffff;">TEXT</a>