css - 如何在电子邮件模板中将表格行内的文本居中

Question

我试图将这个 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>

Answer 1

你的内表只有包装表单元格的宽度，所以你在右边有一个空间。将 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>