Vertical alignment in email template-CodePudding

I want to adjust the alignment of the image in the box so that the bottom of the image always sticks to the bottom of the box!

Important note: These codes are for email template (So we can not use display:flex/grid, position:absolue, margin-top, transform, etc)

What I tried:

<body>
  <table>
    <tr>
      <td>

        <div style="vertical-align: bottom">
          <img src="1.jpg" />
        </div>
...

CodePudding user response：

Put the alignment in the <td> or <table>. Outlook desktop treats <div>s as essentially inline, so it has no 'block' like properties such as alignment.

<table>
    <tr>
      <td style="vertical-align: bottom">
          <img src="1.jpg" />

A common technique to remove the spacing under the <img> is to add to its style display:block or vertical-align:middle. (Send a test to Gmail and you'll see what I mean.) Just confirming you can use vertical-align (any of top|middle|bottom - doesn't make a difference) for that at the same time. i.e.

<img src="1.jpg" style="vertical-align:middle" />