使用内联样式在 html 电子邮件中水平居中 td答案

【问题标题】：horizontally centering td in html email using inline stlyes使用内联样式在 html 电子邮件中水平居中 td
【发布时间】：2018-02-08 20:51:32
【问题描述】：

我正在使用内联样式编写 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>

【问题讨论】：

如果要使单元格的内容居中，可以在 td{ } text-align:center; 中添加样式和垂直对齐：中间；
使文本在 td 内居中，但我想将 td 在页面上居中。
然后把表格放在一个div里面，把div放在绝对位置
或将表格高度和宽度设为100%；和 td 一样，看我的回答我更新了

标签： html outlook html-table inline centering

【解决方案1】：

向 td 单元格添加一个 align 属性。

<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>

【讨论】：

【解决方案2】：

为body标签添加边距，对你有用吗？

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

【讨论】：

不，我希望表格单元格浮动在页面中间，在我添加到 html 的页脚上方，这样您就可以看到它比单元格长 - 所以它们应该水平居中页脚上方。为 body 添加边距会影响整个容器，其中的 td 会移动，但与 body 无关，而是与 body 相关。

【解决方案3】：

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

<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>

更新

要将整个表格居中，请将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>

【讨论】：

确实可以代替每个 td 中的填充。现在，如果我可以让单元格居中（不仅仅是其中的文本）。我添加了页脚以显示它的运行时间比上面的 2 个单元格更长 - 我想要的是它们在页脚上方居中。如果您有任何建议，谢谢。
您可以通过将边距设置为自动使整个表格居中，例如<table style="margin: auto;"></table>
如果你不想让整个表格居中，你可以只居中<tr>或<td> - 在元素上，只需设置style="width: 50%; margin: 0 auto; display: table"
当我尝试这个（50% 宽度；边距 0 自动；显示表格）时，代码在我的代码编辑器的实时预览中正确显示，但在 Outlook 中使用 Bells & Whistles 插入 html 时，td 是两倍大如 bckgd 颜色所示的文本行；所以td的大小不同。我在 2 个表格标签中的每一个中都设置了 500px 的最大宽度，但这就像单元格忽略了它并拉伸到内部文本的两倍大。文本在单元格内居中，但单元格大小不同。这是一个 Outlook 问题是我的代码吗？我认为它是 Outlook，因为它在实时预览中看起来不错。谢谢。
您使用的是什么版本的 Outlook？显然 Outlook 2007/10/13 不支持 display 和 max-width 等标签。您可以在此处找到支持的标签列表 - campaignmonitor.com/css 因此，需要更改这些标签才能使其正常工作。

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：