HTML for email: I need to display an image in the middle of a table, not in the top

Eli
February 2, 2024
160 views
0 votes
2 Answers

It’s about this module, I need to display the image in the middle, not in the top

<!-- D2 - BANNER - LIRT --><table align="center" bgcolor="#E4F4F4" cellpadding="0" cellspacing="0" class="container" role="presentation" style="background-color: #E4F4F4 !important;" width="600">
 
  <tr>
   <td class="padding-lr_20">
    <table align="center" border="0" cellpadding="0" cellspacing="0" class="container" width="600">
     
      <tr>
       <td align="center">
        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
         
          <tr>
           <td align="center">
            <table align="center" border="0" cellpadding="0" cellspacing="0" class="container h-auto" height="300" width="600">
             
              <tr valign="bottom">
               <td align="center">
                <!--LEFT--><table align="left" border="0" cellpadding="0" cellspacing="0" class="container" width="300">
                 
                  <tr>
                   <td align="center" width="100%">
                    <a alias="Body-Image" conversion="false" data-linkto="https://" href="[link goes here]" style="color: #000000; font-family: sans-serif;text-align: center; text-decoration: none; display: block;"><img alt="[add alt text here]" class="content-image" src="https://dummyimage.com/300x100" style="display: block;width:100%" width="300"> </a></td></tr></table><!--//LEFT--><!--[if gte mso]>
                  </td>
                 <td valign="top">
                   <![endif]--><!--RIGHT--><table align="right" border="0" cellpadding="0" cellspacing="0" class="container h-auto" height="300" width="300">
                 
                  <tr valign="middle">
                   <td align="center" class="padding-tp_20 padding-lr_0" style="padding: 0 32px;" width="265">
                    <!--[if mso]>
                    <div style="padding-top:20px;"></div>
                    <![endif]--><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                     
                      <tr>
                       <td align="center" class="h1 text-center" style="font-family:  sans-serif;font-size: 26px;line-height: 30px;color: #000000;font-weight: 700;letter-spacing: -.02em; text-align:left;">
                        Text Text Text Text Text Text </td></tr><tr>
                       <td align="center" class="body_text text-center" style="font-family:  sans-serif;font-size: 16px;line-height: 22px;color: #000000;font-weight: 400; text-align:left;padding-top: 20px;padding-bottom: 20px;">
                     Text Text Text Text Text Text Text Text Text </td></tr></table></td></tr></table><!--//RIGHT--></td></tr></table></td></tr></table></td></tr></table></td></tr></table><table align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" class="container" role="presentation" style="background-color: #ffffff !important;" width="600">
 
  <tr>
   <td style="padding-top: 40px;">
   </td></tr></table><!-- //D2 - BANNER - LIRT -->

I need to center vertically the image. I was trying adding valign="middle" on the TR tags, but it didn’t work.

Answers

To achieve what you need with the image its just a small fix.

    <!-- ... [earlier code] ... -->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="container h-auto" height="300" width="600">
  <tr>
    <td align="center" valign="middle"> <!-- valign="middle" added here -->
      <!--LEFT-->
      <table align="left" border="0" cellpadding="0" cellspacing="0" class="container" width="300">
        <tr>
          <td align="center" valign="middle" width="100%"> <!-- valign="middle" added here -->
            <a alias="Body-Image" conversion="false" data-linkto="https://" href="[link goes here]" style="color: #000000; font-family: sans-serif;text-align: center; text-decoration: none; display: block;">
              <img alt="[add alt text here]" class="content-image" src="https://dummyimage.com/300x100" style="display: block;width:100%" width="300"> 
            </a>
          </td>
        </tr>
      </table>
      <!--//LEFT-->
      <!-- [rest of your code] ... -->
    </td>
  </tr>
</table>
<!-- ... [later code] ... -->

if you want to center the image vertically, you can use CSS Flexbox

<!-- D2 - BANNER - LIRT -->
<table align="center" bgcolor="#E4F4F4" cellpadding="0" cellspacing="0" class="container" role="presentation" style="background-color: #E4F4F4 !important;" width="600">
  <tr>
    <td class="padding-lr_20">
      <table align="center" border="0" cellpadding="0" cellspacing="0" class="container" width="600">
        <tr>
          <td align="center">
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
              <tr>
                <td align="center">
                  <table align="center" border="0" cellpadding="0" cellspacing="0" class="container h-auto" height="300" width="600">
                    <tr valign="bottom">
                      <td align="center" style="display: flex; align-items: center;">
                        <!--LEFT-->
                        <table align="left" border="0" cellpadding="0" cellspacing="0" class="container" width="300">
                          <tr>
                            <td align="center" width="100%">
                              <a alias="Body-Image" conversion="false" data-linkto="https://" href="[link goes here]" style="color: #000000; font-family: sans-serif;text-align: center; text-decoration: none; display: block;">
                                <img alt="[add alt text here]" class="content-image" src="https://dummyimage.com/300x100" style="display: block;width:100%" width="300">
                              </a>
                            </td>
                          </tr>
                        </table>
                        <!--//LEFT-->
                        <!--[if gte mso]>
                        </td>
                        <td valign="top">
                        <![endif]-->
                        <!--RIGHT-->
                        <table align="right" border="0" cellpadding="0" cellspacing="0" class="container h-auto" height="300" width="300">
                          <tr valign="middle">
                            <td align="center" class="padding-tp_20 padding-lr_0" style="padding: 0 32px;" width="265">
                              <!--[if mso]>
                              <div style="padding-top:20px;"></div>
                              <![endif]-->
                              <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                  <td align="center" class="h1 text-center" style="font-family:  sans-serif;font-size: 26px;line-height: 30px;color: #000000;font-weight: 700;letter-spacing: -.02em; text-align:left;">
                                    Text Text Text Text Text Text
                                  </td>
                                </tr>
                                <tr>
                                  <td align="center" class="body_text text-center" style="font-family:  sans-serif;font-size: 16px;line-height: 22px;color: #000000;font-weight: 400; text-align:left;padding-top: 20px;padding-bottom: 20px;">
                                    Text Text Text Text Text Text Text Text Text
                                  </td>
                                </tr>
                              </table>
                            </td>
                          </tr>
                        </table>
                        <!--//RIGHT-->
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<table align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" class="container" role="presentation" style="background-color: #ffffff !important;" width="600">
  <tr>
    <td style="padding-top: 40px;"></td>
  </tr>
</table>
<!-- //D2 - BANNER - LIRT -->

what i added to your code is style="display: flex; align-items: center;" to td.

Please signup or login to give your own answer.

Click here to cancel reply.