如何在表格中间而不是顶部显示图像？

问题描述 投票：0回答：3
html email html-email
3个回答
0
投票

要通过图像实现您所需要的效果，只需进行一个小修复即可。

    <!-- ... [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] ... -->
0
投票

如果你想让图像垂直居中，可以使用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 -->

我添加到您的代码中的是

style="display: flex; align-items: center;"
到
td
。

0
投票

要使用 HTML 获得所需内容，您需要将 

valign="middle"
（如 andrewbyteforge 指出的那样）和 
height="300"
设置为包含图像的 
<td>
。您的原始 HTML 有 
<td align="center" width="100%">
，但它需要是 
<td align="center" valign="middle" width="100%" height="300">
。我希望这有帮助。

<!-- 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" valign="middle" width="100%" height="300">
                    <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 -->

如果不设置高度，就没有“中间”，它会根据其内容（本例中的图像）全部折叠，并且它只是位于其父级的顶部

<td>
。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.