Mailchimp - Как добавить переменный текст над изображением

Question

Я создаю несколько шаблонов в mailchimp и экспортирую html для реализации в моем проекте в lavarel.В каждом шаблоне электронной почты я обновляю код для чтения моих переменных.

Моя проблема: я хочу добавить переменный текст над изображением в gmail.Это работает в других почтовых клиентах, но в gmail не работает.

В gmail это выглядит так:

и в моей клиентской почте хорошо видно:

Мой код:

<div class="month-center" style="position: relative; margin: 0 auto; right: 0; left: 0;">
   <strong style="position: absolute; vertical-align: middle; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);left: 0; right: 0; color: white; font-size: 2em; font-family: Arial, 'Helvetica Neue', Helvetica, sans serif;">Setembro</strong>

    <img align="center" alt="" src="https://gallery.mailchimp.com/a9d87c79b29239577e5d51e67/images/1ff7f4b7-c17a-498e-be89-1816b2cbf1a3.jpg" width="300" style="max-width:300px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" class="mcnImage">
  </div>

Мне кажется, проблема в некоторых атрибутах CSS, которые Gmail не принимает как абсолютные позиции.

Как я могу решить это?

Answer 1

Вы правы, Gmail (и многие почтовые клиенты) не поддерживают position.

Одним из решений вашей проблемы будет использование фонового изображения вместо позиционирования.

https://backgrounds.cm/ - лучший инструмент для создания фоновых изображений, дружественных к электронной почте.

https://www.campaignmonitor.com/css/ - лучший ресурс для проверки совместимости CSS для ряда почтовых клиентов.