在html电子邮件中使用内嵌stlyes水平居中td_Html_Outlook_Html Table_Inline_Centering

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

html outlook

在html电子邮件中使用内嵌stlyes水平居中td,html,outlook,html-table,inline,centering,Html,Outlook,Html Table,Inline,Centering,我正在写一封使用内联样式的html电子邮件，因为我将在Outlook中发送它并阅读，这是避免浏览器重新格式化的最佳方法。我想把下面的两个链接放在中间，我把它们放在表格单元格中，因为这是我在Outlook中使用填充的唯一方法。我希望这两个链接在页面上以背景和填充物居中显示，但我不知道如何使用内联样式和表格来实现这一点。有人能帮忙吗？谢谢 <!DOCTYPE html> <html> <head> <title>email blast re f

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

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


电子邮件爆破重拍电影
|家(；718) 399-8344 |单元和#40；347) 325-4415

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

在body标签上添加边距，对您有用吗

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

首先，您可以为

表

标记指定

单元格填充

属性，而不是在每个单元格上使用

填充

<table cellpadding="10">

要仅使行或列居中，请相应地应用-

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

或

使用文本对齐：居中，垂直对齐：中间

表格{宽度：100%；高度：100%；}
td{宽度：100%；高度：100%；文本对齐：中心；垂直对齐：中间；字体大小：14px；}
a、 a:链接，a:访问{填充：10px；显示：内联块；颜色：白色；文本装饰：无；边距：10px；背景：#3D87F5；}


电子邮件爆破重拍电影

查看此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>


电子邮件爆破重拍电影
|家(；718) 399-8344 |单元和#40；347) 325-4415

如果要将单元格内容居中，可以在td{}文本align:center中添加样式；垂直对齐：中间对齐；这将使文本在td内居中，但我想使td在页面上居中。然后将表格放在div内，并将div绝对定位，或使表格高度和宽度为100%；与td相同，请参见我的答案i Updated，它在每个td中代替了填充。现在，如果我能让单元格居中（而不仅仅是其中的文本）。我添加了页脚以显示它如何比上面的两个单元格运行得更长-我想要的是它们位于页脚上方的中心。如果您有任何建议，谢谢。您可以通过将页边距设置为“自动”来居中整个表格，如

如果您不想居中整个表格，您可以仅居中

或

-在元素上，只要在我尝试此操作时设置

style=“width:50%；margin:0 auto；display:table”

（50%宽度；边距0自动；显示表）代码在我的代码编辑器的实时预览中正确显示，但在Outlook中使用Bells&Whistles插入html时，td是bckgd颜色显示的文本行的两倍大；因此td的大小不同。我在两个表标记中的每个标记中都设置了最大宽度为500px的值，但就像单元格忽略了这一点，并将其拉伸为a的两倍大s文本在内部。文本在单元格内居中，但单元格大小不同。这是Outlook问题吗？我的代码是否存在此问题？我假设它是Outlook，因为它在实时预览中看起来正常。谢谢。您使用的Outlook版本是什么？显然Outlook 2007/10/13不支持

显示和最大宽度等标记。您可以这里有一个支持的标签列表-所以，需要改变它以使它工作。不，我希望表格单元格浮动在页面中间，在我添加到HTML的页脚之上，这样你就可以看到它比单元格的长度要长，所以它们应该水平地位于页脚的上方。ntainer，td的内部移动，但不与身体相关，而是与身体相关。
<tr style="width: 50%; margin: 0 auto; display: table;"></tr>
or 
<td style="width: 50%; margin: 0 auto; display: table;"></td>

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