HTML E-Mail zeigt einen Text vertikal zentriert zum Bild ansprechend

Question

Dies ist, was ich derzeit entwickelt habe. Ich möchte, dass der Text rechts vom Bild und vertikal mittig in Bezug auf das Bild in der Desktop-Ansicht und auf das untere Ende des Bildes in der mobilen Ansicht ausgerichtet ist. Sie können den gesamten HTML-Markup ändern, falls dies erforderlich ist.

HINWEIS Das Bild ist größer als der Text.

<table class="col-2 mobile-full-width" style="width:100%;"> 
 
    <tbody> 
 
    <tr> 
 
     <td text-align="center" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;border-top: 0;border-bottom: 0;padding-top: 20px;text-align: center;padding-bottom: 0;vertical-align: center;text-align: center;vertical-align: middle;vertical-align: center;"> 
 
     <!--[if gte mso 9]> 
 
     <table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;"> 
 
      <tr> 
 
      <td align="center" valign="top" width="220" style="width:220px;"> 
 
     <![endif]--> 
 
     <table class="profile-label mobile-full-width" width="220px" style="width:220pt; float:left;" align="left"> 
 
      <tbody> 
 
      <tr> 
 
       <td width="220"> 
 
       <img src="https://static.pexels.com/photos/1029/landscape-mountains-nature-clouds.jpg" width="500" height="310" border="0" style="display: block;" alt=""> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     <!--[if gte mso 9]> 
 
       </td> 
 
       <td valign="middle" width="440" style="width:440px;"> 
 
     <![endif]--> 
 
     <table class="profile-description mobile-full-width" width="440px" style="width:440px;height: 100%;vertical-align: center;" align="left"> 
 
      <tbody style="vertical-align: middle;"> 
 
      <tr> 
 
       <td class="field-column" style="word-break: break-all;"> 
 
       some text that should be vertically center alligned 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     <!--[if gte mso 9]> 
 
       </td> 
 
      </tr> 
 
      </table> 
 
     <![endif]--> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

ändern height: 100% auf die Höhe des Bildes. Probieren Sie etwas wie height: 310px-.profile-description

Ändern Sie diese ..

<table class="profile-description mobile-full-width" width="440px" style="width:440px;height: 100%;vertical-align: center;" align="left">

Dazu .... <table class="profile-description mobile-full-width" width="440px" style="width:440px;height: 310px;vertical-align: center;" align="left">

hoffe, das hilft

Answer 2

Verwendung vertical-align: middle .

div.container, div.img, div.text { 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
} 
 
div.img { 
 
    width:300px; 
 
    height:200px; 
 
    background-color:green; 
 
} 
 

 
div.text { 
 
    background-color:red; 
 
}

<div class="container"> 
 
    <div class="img">IMAGE HERE</div> 
 
    <div class="text"> 
 
    Some text here ! 
 
    </div> 
 
</div>

Answer 3

einzige Weg, dies zu tun, die in den meisten gängigen E-Mail-Clients funktioniert, ist das Bild in zwei Teile zu brechen. Dies ist, wie ich es getan habe, könnte nicht die beste Lösung da draußen sein.

1. Der Teil, der über den Satz kommen sollte.
2. Rest des Bildes und der Text daneben.