0

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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Some Text&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong>
                       </a>
                    </td>
                </tr>
chapman8790
  • 1
  • 2

2 Answers2

0

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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Some Text&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong>
    </a>
  </td>
</tr>
ActiveCodex
  • 120
  • 4
  • unfortunately the padding on the a tag is not rendered by outlook HTML so although you can see this working in the browser it doesn't have any effect in outlook. In fact I have now removed padding from the td and a and let the elements above and below handle the space from the button and still can't get the text to centre – chapman8790 Jun 22 '20 at 19:59
  • Ok, if the padding aren't rendered in the email template, you can try adding height:28px to the a tag, whilst also keeping the line-height:28px and the display:block, much like what @terminalvelocity has suggested. Last thing you can try is adding blank tr/td with fixed height above and below the button to mimic the spacing. Hope this helps you out. – ActiveCodex Jun 22 '20 at 20:07
0

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>
TerminalVelocity
  • 133
  • 2
  • 7
  • I'm pretty sure from my trial and error that the line-height (and the required mso-line-height-rule: exactly) isn't respected on the a tag, I've only seen this work on the td. Currently the td is correctly giving me the height in outlook I just can't get the text of the a tag to sit in the centre of that line height!? – chapman8790 Jun 22 '20 at 20:02
  • @chapman8790, it's my understanding that Outlook only supports specific CSS. Check out which properties you are allowed to use: https://www.campaignmonitor.com/css/positioning-display/object-position/ You may also find some answers in these stack overflow posts: https://stackoverflow.com/questions/50494556/button-text-alignment-in-outlook-com and https://stackoverflow.com/questions/47892510/html-email-button-alignment-in-outlook – TerminalVelocity Jun 23 '20 at 11:40