代码之家 › 专栏 › 技术社区 › Smithy

如何将此文本置于电子邮件模板中表格行的中心

html-email html-table css

Smithy · 技术社区 · 6 年前

我想把这个放在中心 lorem ipsum公司 表格行中的文本,但由于某种原因,上面的图像(即使它们位于单独的tr中)似乎会影响这一点。只有在我删除它们之后,文本才会居中。。。我怎样才能防止它们影响下面的文本位置。。?

代码如下:

    @import url('https://fonts.googleapis.com/css?family=Open+Sans');

    * {
        font-family: 'Open Sans', sans-serif;
    }

    .main-text {
       /* padding-left: 130px;*/
        padding-bottom: 45px;
        margin: 0 auto;
    }

    #main {
        background: lightblue;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        margin-left: auto;
        margin-right: auto;
        width: 620px;
    }

    table {
        font-family: sans-serif;
    }

    .img-left {
        padding: 20px 20px 80px 40px;
    }

    .img-right {
        width: 85px;
        float: right;
        padding: 15px 30px;
        position: relative;
        right: -10px;
    }

<table id="main" border="0" cellpadding="0" cellspacing="0" id="templateColumns">
    <tr class="header-test">
        <td align="center" valign="top" width="50%" class="templateColumnContainer img-left">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent" style="padding-top: 5px;">
                        <img src="http://via.placeholder.com/350x150" width="210" style="max-width:210px; position: relative; left: -15px;" class="columnImage" />
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent">
                        <a href="#" target="_blank">
                            <img src="http://via.placeholder.com/350x150" 
                                 width="85" class="columnImage img-right" />
                        </a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td align="left" style="width: 100%;">
            <table style="margin: 0 auto;">
                <tr>
                    <td></td>
                    <td class="main-text" style="color: #ffffff; text-align: center">
                        <p style="font-size: 12px; line-height: 1;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus, veniam sint? Ducimus eius necessitatibus minima nemo ratione. Nam atque aliquam quia itaque, explicabo qui, fuga alias unde nulla quo quaerat.</p>

                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

1 回复 | 直到 6 年前

Matthias Seifert Garvi Patibandha 6 年前

您的内部表格只有包装表格单元格的宽度,因此您在右侧有一个空间。添加 colspan="2" 到包装 td ,它应该像下面的代码段一样居中。

    @import url('https://fonts.googleapis.com/css?family=Open+Sans');

    * {
        font-family: 'Open Sans', sans-serif;
    }

    .main-text {
       /* padding-left: 130px;*/
        padding-bottom: 45px;
        margin: 0 auto;
    }

    #main {
        background: lightblue;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        margin-left: auto;
        margin-right: auto;
        width: 620px;
    }

    table {
        font-family: sans-serif;
    }

    .img-left {
        padding: 20px 20px 80px 40px;
    }

    .img-right {
        width: 85px;
        float: right;
        padding: 15px 30px;
        position: relative;
        right: -10px;
    }

<table id="main" border="0" cellpadding="0" cellspacing="0" id="templateColumns">
    <tr class="header-test">
        <td align="center" valign="top" width="50%" class="templateColumnContainer img-left">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent" style="padding-top: 5px;">
                        <img src="http://via.placeholder.com/350x150" width="210" style="max-width:210px; position: relative; left: -15px;" class="columnImage" />
                    </td>
                </tr>
            </table>
        </td>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent">
                        <a href="#" target="_blank">
                            <img src="http://via.placeholder.com/350x150" 
                                 width="85" class="columnImage img-right" />
                        </a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <!-- add colspan="2" in the line below! -->
        <td align="left" style="width: 100%;" colspan="2">
            <table style="margin: 0 auto;">
                <tr>
                    <td></td>
                    <td class="main-text" style="color: #ffffff; text-align: center">
                        <p style="font-size: 12px; line-height: 1;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus, veniam sint? Ducimus eius necessitatibus minima nemo ratione. Nam atque aliquam quia itaque, explicabo qui, fuga alias unde nulla quo quaerat.</p>

                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>