Forgive me if this is simple, it's been a long time since I put some HTML together for email design. I'm working on a template that I have received and have a button in the template that renders perfectly on the browser.
In outlook it's almost there, I'm trying to get the block to include the link, not just the text. giving a decent amount of height above and around the text to act as a button. The line height on the td achieves the height of the block but I can't get the text to vertically align in the center of the block.
Can anyone help me out?
<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>
Moving the padding
from td
to a
and applying a display:block'
will achieve the result you want.
<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>
There is a trick where making the line-height
equal to the height
will center the text.
You can read more on vertically centering .
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.