0

Есть такой кусочек в теле письма оформленного в 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 отображается в левом углу. Как это исправить?

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.