Question

我正在使用内联样式编写html电子邮件，因为我将在Outlook中发送它并阅读这是绕过浏览器重新格式化的最佳方式。我想把下面的两个链接集中在一起，我将它放入表格单元格，因为这是我可以在Outlook中使用填充的唯一方法。我希望2个链接以页面上的背景和填充为中心显示，但我不知道如何使用内联样式和表格来实现。有人可以帮忙吗？谢谢！

<!DOCTYPE html>
<html>
<head>
    <title>email blast re films</title>
    </head>
    <body>
        <table>
    <tr>
        <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">
            <a href="http://bartonlewisfilm.com/artwork/4258558-wall-cuts-train-stations-New-York-City-excerpt.html" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3D87F5; text-decoration: none; color: white; border-radius: 5px;" title="watch wall cuts, train stations, New York City" target="_blank;">Watch my film "wall cuts, train stations, New York City"</a>
        </td>
    </tr>
    </table>
    <table>
    <tr>
        <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">
            <a href="http://http://bartonlewisfilm.com/artwork/4264539-red-hook-rush-hour-excerpt.html" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3D87F5; text-decoration: none; color: white; border-radius: 5px;" title="watch red hook, rush hour" target="_blank;">Watch my film "red hook, rush hour"</a>
        </td>
    </tr>
    </table>
<table>
    <tr>
        <td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;">
            <a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background:  #3A8E47; 
    text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home &#40;718&#41; 399-8344 | cell &#40;347&#41; 325-4415
        </td>
    </tr>
    </table>
    </body>
</html>

Answer 1

您将对齐属性添加到td单元格。

<td align="center" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;"> <a href="www.somesite.com">Your link </a>
    </td>

Answer 2

为body标签添加边距，这对您有用。

 <body style="margin-top:20%;margin-bottom:20%;margin-left:30%;">

Answer 3

首先，您可以为padding代码指定cellpadding属性，而不是在每个单元格上使用table -

<table cellpadding="10">

默认情况下，单元格内容居中 -

<table cellpadding="10">
   <tr>
      <td style="background-color: red;">
          <a href="address">Link 1</a><br/>
          <a href="address">Link 2</a>
      </td>
   </tr>
   <tr>
      <td style="background-color: red;">
          <a href="address">Link 1</a><br/>
          <a href="address">Link 2</a>
      </td>
   </tr>
</table>

UPD

要将整个表格居中，请将margin设置为0 auto -

<table style="margin: 0 auto;">

要仅以行或列为中心，请相应地应用 -

<tr style="width: 50%; margin: 0 auto; display: table;"></tr>
or 
<td style="width: 50%; margin: 0 auto; display: table;"></td>

Answer 4

使用text-align：center，vertical-align：middle，

table{width:100%;height:100%;}
td{width:100%;height:100%; text-align:center; vertical-align:middle; font-size: 14px; }
a, a:link, a:visited{padding:10px; display:inline-block; color: white; text-decoration: none;margin:10px; background: #3D87F5; }

<!DOCTYPE html>
        <html>
        <head>
            <title>email blast re films</title>
            </head>
            <body>
            <div id="centerme">
                <table>
            <tr>
                <td>
                    <a href="http://bartonlewisfilm.com/artwork/4258558-wall-cuts-train-stations-New-York-City-excerpt.html" title="watch wall cuts, train stations, New York City" target="_blank;">Watch my film "wall cuts, train stations, New York City"</a>
                <br/>
                    <a href="http://http://bartonlewisfilm.com/artwork/4264539-red-hook-rush-hour-excerpt.html"  title="watch red hook, rush hour" target="_blank;">Watch my film "red hook, rush hour"</a>
                </td>
            </tr>
            </table>
            </div>
            </body>
        </html>

Answer 5

看看这个HTML。对我来说很好。

<!DOCTYPE html>
<html>
<head>
    <title>email blast re films</title>
    </head>
    <body style="height:height:500px;">
        <table border="0" style="width:100%; text-align:center;">
    <tr>
        <td >
            <span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;margin-top:10%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; background: #3D87F5; color: white;"><a href="http://bartonlewisfilm.com/artwork/4258558-wall-cuts-train-stations-New-York-City-excerpt.html" style="padding-right:10px;padding-left:10px; background: #3D87F5; text-decoration: none; color: white; " title="watch wall cuts, train stations, New York City" target="_blank;">Watch my film "wall cuts, train stations, New York City"</a></span>
            <span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;">&nbsp;</span>

            <span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;"><a href="http://http://bartonlewisfilm.com/artwork/4264539-red-hook-rush-hour-excerpt.html" style="padding-right:10px;padding-left:10px; background: #3D87F5; text-decoration: none; color: white; border-radius: 5px;" title="watch red hook, rush hour" target="_blank;">Watch my film "red hook, rush hour"</a></span>
            <span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;">&nbsp;</span>
        </td>
    </tr>

    <tr>
        <td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;">
            <a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background:  #3A8E47; 
    text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home &#40;718&#41; 399-8344 | cell &#40;347&#41; 325-4415
        </td>
    </tr>
    </table>
    </body>
</html>

使用内联stlyes在html电子邮件中水平居中td

5 个答案: