代码之家  ›  专栏  ›  技术社区  ›  Barton Lewis

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

centering inline html-table outlook html
  •  0
  • Barton Lewis  · 技术社区  · 7 年前 

    <!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>
    5 回复  |  直到 7 年前
        1
  •  1
  •   magic_turtle    7 年前

    首先,不要使用 padding cellpadding a的属性 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>

    要使整个桌子居中,请设置 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>
        2
  •  0
  •   teej2542    7 年前

    将align属性添加到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>
        3
  •  0
  •   Amit Kumar Singh    7 年前 

     <body style="margin-top:20%;margin-bottom:20%;margin-left:30%;">
        4
  •  0
  •   bdalina    7 年前

    使用文字对齐:居中,垂直对齐:居中, 

    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
  •  0
  •   Amit Kumar Singh    7 年前

    查看此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>
    推荐文章
    Softly  ·  单选按钮未按预期取值
    1 年前
    NovoMannen  ·  导航中的下拉菜单在内容后面重叠
    1 年前
    Thirumal isireddy  ·  在导航栏顺风css中,img被扭曲,而不是将元素推到旁边
    1 年前
    eXor420  ·  如何在脚本标记中使用导出的函数?
    1 年前
    Hadi  ·  如何在无效和有效输入中选择用于更改样式的psoudo元素(after)
    1 年前
    IonicMan  ·  剑道网格在宽度过大时不显示某些列
    1 年前
    Kernier  ·  如何将数学公式支持添加到StacksEditor?
    1 年前
    Md. Ibrahim  ·  CSS网格项溢出小屏幕滚动
    1 年前
    Arjun V Srivatsa  ·  如何将系统时区信息分配给javascript中的变量?
    1 年前
    Akshay mek  ·  Vscode扩展建议不适用于某些文件夹
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号