Как центрировать этот текст внутри строки таблицы в шаблоне электронной почты - PullRequest
Новая
       13

Как центрировать этот текст внутри строки таблицы в шаблоне электронной почты

0 голосов
/ 16 мая 2018

Я пытаюсь центрировать этот lorem ipsum текст внутри строки таблицы, но по какой-то причине изображения над ним - даже если они находятся в отдельной строке - похоже, влияют на это.Только после их удаления текст центрируется ... Как я могу предотвратить их влияние на размещение текста ниже ...?

Код ниже: 

    @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 Ответ

0 голосов
/ 16 мая 2018

Ваша внутренняя таблица имеет только ширину ячейки упаковочной таблицы, поэтому у вас есть пространство с правой стороны. Добавьте 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>
...