HTML Email - center an image inside a element that has defined width and height

user_10265109 0
Viewed 195

I have this code below.
If I run this code here on a browser, everything works fine.

But, in an HTML e-mail: the code does not work as intended.

The height seems to be the main issue, the height I have configured automaically becomes min-height on an HTML email.

This is what it looks like on the email:
enter image description here

My ultimate goal is to: center an image horizontally and vertically inside of a element that has defined width and height in an HTML email (sample of desired output is on the runnable snippet below).

<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>

html-email css email html
1 Answers
<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>
user_91414720
Related