提问者:小点点

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


原谅我如果这是简单的,它是很长时间以来,我把一些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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Some Text&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong>
                       </a>
                    </td>
                </tr>

共2个答案

匿名用户

paddingtd移动到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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Some Text&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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>