使用内嵌HTML电子邮件水平居中TD stlyes

我写使用内嵌样式，因为我会在Outlook中发送它，并阅读这是绕过浏览器重新格式化的最佳途径HTML电子邮件。我想将以下两个链接居中，我将它们放入表格单元格中，因为这是我可以在Outlook中使用填充工具的唯一方法。我希望这两个链接以页面上的背景和填充为中心显示，但我不知道如何使用内联样式和表格来实现这一点。谁能帮忙？谢谢！使用内嵌HTML电子邮件水平居中TD stlyes

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

来源

2017-08-31 Barton Lewis

如果您想要居中单元格的内容，您可以在td {} text-align：center;中添加样式。和vertical-align：middle; – bdalina

以td内的文本为中心，但我想将td居中在页面上。 –

然后把表格放在一个div中，并将div的绝对位置设置为 – bdalina

第一，而不是在每个单元使用padding，你可以指定cellpadding属性为table标签 -

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

<table cellpadding="10">

单元格内容默认情况下，中心UPD

要居中在W孔表，设置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>

来源

2017-08-31 02:38:11 user4447655

在每个td中都没有填充的地方工作。现在如果我可以让细胞居中（不仅仅是它们中的文字）。我添加了页脚以显示它的运行时间比上面的2个单元更长 - 我想要的是它们位于页脚上方。谢谢，如果你有任何建议。 –

您可以通过设置边距为自动对齐整个表格，如'

' – user4447655

如果您不想居中放置整个表格，则可以只居中放置“”或'' - 在元素上，只设置'style =“width：50％; margin：0 auto; display：table”' – user4447655

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

来源

2017-08-31 02:29:09 teej2542

我试过了，但没有奏效。唉... –

为身体标记添加边距，是否适合您。

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

来源

2017-08-31 02:37:50 Amit

不，我希望表格单元在页面中间漂浮，在我添加到HTML页脚的上方，这样您可以看到它比单元格更长 - 所以它们应该水平居中在页脚上方。为身体增加边距会影响整个容器，其内部的td移动，但与身体无关，而与身体有关。 –

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

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>

来源

2017-08-31 02:40:56 bdalina

看看这个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>

来源

2017-08-31 04:09:38 Amit

使用内嵌HTML电子邮件水平居中TD stlyes

回答

相关问题