中间垂直对齐 outlook 表格单元格中的 href 文本

Question

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>

Answer 1

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>

Answer 2

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>