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

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

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

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

    首先,不要使用 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    8 年前

    将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    8 年前 

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

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

    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    8 年前

    查看此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>
    推荐文章
    SNYDERHAUS  ·  不影响居中HTML元素的伪元素
    8 年前
    Barton Lewis  ·  使用内联stlyes在html电子邮件中水平居中td
    8 年前
    Lavandysh  ·  调整大小后如何使窗体居中于屏幕中间
    8 年前
    Dr. Fabian Habersack  ·  编写/应用“减去均值”函数来标准化回归参数
    8 年前
    user8385857  ·  居中CSS幻灯片
    8 年前
    M. GR.  ·  使用display flex[复制]将多个项目居中
    8 年前
    Detoxical  ·  我如何制作一个带有圆形边框的div,并使其中的fa图标居中?
    8 年前
    user7259161  ·  引导响应网格上的中心DIV
    9 年前
    y_nk  ·  水平可滚动列表完全居中,具有动态宽度项
    9 年前
    Tad  ·  使用GridLayoutManager时,Android RecyclerView单元格始终左对齐
    10 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号