Оформление html тела письма в email

Question

Есть такой кусочек в теле письма оформленного в html разметке

<table>
<tr>
    <p style=" display: flex; justify-content: center; ">
      <table width="30%" role="presentation" border="0" cellspacing="0" cellpadding="0">
            <tbody>
                  <tr>
                     <td>
                                        <a href="${taskUrl}"
                                           style="...">
                                            Go to task
                                        </a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            </p>
                        </tr>
</table>

отображается типа кнопка с текстовой ссылкой.

Но проблема в том что стиль <p style=" display: flex; justify-content: center; "> центрирует эту кнопку только если смотреть в браузере. В емайл Go to task отображается в левом углу. Как это исправить?

Answer 1

flex вообще мало поддерживается в Email-программах.

Вот здесь можно посмотреть: flex in email

Что можно использовать в верстке Email

Используйте CSS 1 или 2 версии.

Предлагаю следующий вариант:

<table style="width:100%">
    <tr>
        <td style="width: 33%"></td>
        <td style="width: 33%" align="center">
            <table role="presentation" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                <tr>
                    <td>
                        <a href="${taskUrl}" style="...">Go to task</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </td>
        <td style="width: 33%"></td>
    </tr>
</table>

БЛОГ НА HUSL

Оформление html тела письма в email

Ответы (1 шт):