HTML Email - центрируйте изображение внутри элемента, который имеет ширину и высоту - PullRequest
Новая
       9

HTML Email - центрируйте изображение внутри элемента, который имеет ширину и высоту

0 голосов
/ 14 ноября 2018

У меня есть этот код ниже.
Если я запускаю этот код здесь в браузере, все работает нормально.

Но в электронном письме в формате HTML: код не работает должным образом .

Высота, по-видимому, является главной проблемой, height, который я настроил автоматически, становится min-height в электронном письме HTML.

Вот как это выглядит в электронном письме:
enter image description here

Моя конечная цель заключается в том, чтобы: центрировать изображение по горизонтали и вертикали внутри элемента, который определил ширину и высоту в электронном письме в формате HTML (пример желаемого результата приведен в следующем фрагменте кода). 

<table>

  <tbody>
    <tr>
      <td style="padding-top:10px;">
        <p style="text-align:center;height: 105px;background-color:#282828;width: 80px;" height="85">
          <span style="display:inline-block;height: 100%;vertical-align:middle;" height="85px"></span>
          <img width="50" height="75" style="/* min-height:80%; */vertical-align:middle;" src="https://ecp.yusercontent.com/mail?url=http%3A%2F%2Fawsdevelopment.tzilla.com%2Fartwork%2Fgenerate%2F285cf3ee-4ecc-40ee-917d-d743eba4da8e-out.png&amp;t=1542159076&amp;ymreqid=b0ed4f41-e1fa-3871-1c54-fe002f014500&amp;sig=.ZExttgldk1nd96JyybAyQ--~C">
        </p>
      </td>

      <td>
        <span>Adult Classic Tee</span>
      </td>

      <td>
        $ 21.00
      </td>

    </tr>

  </tbody>
</table>

Ответы [ 2 ]

0 голосов
/ 15 ноября 2018

Большинство почтовых клиентов не очень хорошо поддерживают свойства display и position.Самый безопасный способ добиться максимальной совместимости с клиентом - использовать вложенную таблицу .Использование атрибутов стиля, таких как bgcolor, height, valign, также поможет более старым почтовым клиентам. 

<table>
  <tbody>
    <tr>

      <td style="padding-top:10px;">

        <table border="0" height="105">

          <tr>
            <td align="center" valign=“middle” width="80" height="85" bgcolor="#282828">
              <img width="50" height="75" src="https://ecp.yusercontent.com/mail?url=http%3A%2F%2Fawsdevelopment.tzilla.com%2Fartwork%2Fgenerate%2F285cf3ee-4ecc-40ee-917d-d743eba4da8e-out.png&amp;t=1542159076&amp;ymreqid=b0ed4f41-e1fa-3871-1c54-fe002f014500&amp;sig=.ZExttgldk1nd96JyybAyQ--~C">
            </td>
          </tr>

        </table>

      </td>

      <td>
        <span>Adult Classic Tee</span>
      </td>

      <td>
        $ 21.00
      </td>

    </tr>
  </tbody>
</table>
0 голосов
/ 14 ноября 2018 
<table>

  <tbody>
    <tr>
      <td style="padding-top:10px;">
        <p style="text-align:center;height: 105px;background-color:#282828;width: 80px;vertical-align: middle; display: table-cell;" height="85">
          <span style="display:inline-block;height: 100%;vertical-align:middle;" height="85px"></span>
          <img width="50" style="/* min-height:80%; */vertical-align:middle;" src="https://ecp.yusercontent.com/mail?url=http%3A%2F%2Fawsdevelopment.tzilla.com%2Fartwork%2Fgenerate%2F285cf3ee-4ecc-40ee-917d-d743eba4da8e-out.png&amp;t=1542159076&amp;ymreqid=b0ed4f41-e1fa-3871-1c54-fe002f014500&amp;sig=.ZExttgldk1nd96JyybAyQ--~C">
        </p>
      </td>

      <td>
        <span>Adult Classic Tee</span>
      </td>

      <td>
        $ 21.00
      </td>

    </tr>

  </tbody>
</table>
...