Einzelzellreihe mit vertikal zentriertem Bild und Text?

Ich habe versucht, nach Lösungen im Stapel zu suchen, aber keine der Antworten, die ich gefunden habe, behebt mein Problem.Einzelzellreihe mit vertikal zentriertem Bild und Text?

Ich entwickle eine E-Mail und ich möchte eine einzelne Zelle Zeile, die Text mit einem Bild zwischen dem Text hat. Die Zellenhöhe ist die volle Höhe des Bildes, aber ich möchte, dass der Text vertikal zentriert ist. Der Text ist jetzt unten auf der Unterseite

Hier ist mein Code (es gibt viele Inline-Stile, ich entschuldige mich im Voraus). Bitte beachten Sie, dass es sich um eine einzelne Spalte handelt, die Teil der fluid hybrid approach von Nicole Merlin ist.

<tr> 
     <td valign="middle" bgcolor="#e2f4ff" style="padding:0"> 
     <table width="100%" align="center" border="1" style="border-spacing:0;font-family:sans-serif;color:#333333;"> 
      <tr> 
      <td valign="middle" style="vertical-align: middle !important;;padding:0;text-align:left;padding-bottom: 5px !important;color: #17a0ce;font-weight: bold; Margin:0;font-size:26px; text-align: center;"> 
       THE<img src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" alt="ABC's" /> OF SAFE SLEEP FOR DOGS 
      </td> 
      </tr>    
     </table> 
     </td> 
    </tr>

Quelle

2016-08-25 brando

Das Bild vertikal ausrichten.

<table> 
 
    <tr> 
 
    <td valign="middle" bgcolor="#e2f4ff" style="padding:0"> 
 
     <table width="100%" align="center" border="1" style="border-spacing:0;font-family:sans-serif;color:#333333;"> 
 
     <tr> 
 
      <td valign="middle" style="vertical-align: middle !important;padding:0;text-align:left;padding-bottom: 5px !important;color: #17a0ce;font-weight: bold; Margin:0;font-size:26px; text-align: center;"> 
 
      THE 
 
      <img style="vertical-align: middle !important;" src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" alt="ABC's" />OF SAFE SLEEP FOR DOGS 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 

 
</table>

Quelle

2016-08-25 15:34:16

perfekte fix, danke! Ich schätze, ich habe diese E-Mail zu lange gelesen. – brando

Update, leider Outlook 2007+ funktioniert nicht. Der Text zeigt immer noch auf der Unterseite der Zelle – brando

Scheint wie es sollte (https://www.campaignmonitor.com/css/), aber ich würde die Textteile in "Span" -Tags wie doppelte Sicherheitskontrolle, –

Die beste Lösung, die für alle E-Mail-Clients funktioniert, ist sie zu schieben als mit dem anderen Text, dass bestimmte Bild inline setzen. Das kann getan werden, indem Sie den Text und das Bild in viele <td> der gleichen einzelnen Zeile <tr> setzen.

Dadurch können Sie die genaue Höhe, Breite und andere Attribute, die Sie für die einzelnen Tags benötigen, definieren. die

Überprüfen Sie die folgenden:

<table> 
 
    <tr> 
 
    <td valign="middle" bgcolor="#e2f4ff" style="padding:0"> 
 
     <table width="100%" align="center" border="1" style="border-spacing:0;font-family:sans-serif;color:#333333;"> 
 
     <tr> 
 
      <td valign="middle"> 
 
      <table border="0" cellpadding="0" cellspacing="0"> 
 
       <tr> 
 
       <td valign="middle" style="vertical-align: middle !important;padding:0;text-align:left;padding-bottom: 5px !important;color: #17a0ce;font-weight: bold; Margin:0;font-size:26px; text-align: center;"> 
 
        THE 
 
       </td> 
 
       <td valign="middle" style="vertical-align: middle !important;padding:0;"> 
 
        <img style="vertical-align: middle !important;" src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" alt="ABC's" /> 
 
       </td> 
 
       <td valign="middle" style="vertical-align: middle !important;padding:0;text-align:left;padding-bottom: 5px !important;color: #17a0ce;font-weight: bold; Margin:0;font-size:26px; text-align: center;"> OF SAFE SLEEP FOR DOGS 
 
       </td> 
 
       </tr> 
 
      </table> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</table>

Quelle

2016-09-24 11:59:08 Jad

Einzelzellreihe mit vertikal zentriertem Bild und Text?

Antwort

Verwandte Themen