Cómo alinear verticalmente la imagen y el texto entre las plantillas de correo electrónico del cliente

<table cellspacing="0" cellpadding="0" border="0"> 
<tbody> 
    <tr> 
    <td width="20">&nbsp;<img height="12" alt="" src="/CmpImg/2010/22677/924228_immunotec_bullet.gif" width="12"></td> 
    <td valign="top"><span style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; COLOR: rgb(0,0,0); LINE-HEIGHT: 16px; PADDING-TOP: 0px; FONT-FAMILY: Arial; TEXT-ALIGN: left">Reliable service team, deployed to your location, at your convenience</span></td> 
    </tr> 
</tbody> 
</table>

Tengo el código anterior en Outlook. Se muestra bien, pero en Gmail, Yahoo y Hotmail, las viñetas y el texto no se alinean verticalmente en la parte superior, parece que hay un relleno alrededor de la parte superior del texto. ¿Algunas ideas?Cómo alinear verticalmente la imagen y el texto entre las plantillas de correo electrónico del cliente

Fuente

2010-12-08 user1417094

En primer lugar, como práctica general con los correos electrónicos, querrá poner el bloque de visualización y normalmente borde: ninguno en todas las imágenes. En segundo lugar, es posible que tenga problemas con los valores predeterminados. Establecer todos los estilos en los td. Si necesito un espaciado específico, estableceré el tamaño y la altura de la línea en 1px en el td para evitar la herencia. Es posible que también necesite validar arriba en su primera td. Realmente no puedo decir qué parte no se está alineando con la descripción. Buena suerte con tus correos electrónicos.

Fuente

2012-03-15 04:56:00 mikevoermans

En pocas palabras, en las pruebas que he estado haciendo esta tarde parece que Outlook soporta la propiedad valign en elementos td pero gmail y el resto quieren la regla css de alineación vertical. Gmail sólo es compatible con los estilos en línea, las etiquetas no de estilo, por lo que tiene que hacer algo como esto:

<table> 
    <tr> 
    <td valign="top" style="vertical-align:top;"></td> 
    </tr> 
</table>

También asegúrese de que se declara un tipo de documento! Asegúrese de que esto está por encima de su elemento <html>:

<!DOCTYPE html>

Fuente

2012-06-21 05:13:11

En realidad, no necesita el CSS, solo 'valign =" top "' – John

@John es correcto, el atributo 'valign' es el mejor, no use CSS para esto. – revelt

Usar este código

<table cellspacing="0" cellpadding="0" border="0"> 
    <tbody> 
    <tr> 
    <td width="20" align="left" valign="top">&nbsp;<img height="12" alt="" src="/CmpImg/2010/22677/924228_immunotec_bullet.gif" width="12" align="top"></td> 
    <td align="left" valign="top"><span style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; COLOR: rgb(0,0,0); LINE-HEIGHT: 16px; PADDING-TOP: 0px; FONT-FAMILY: Arial; TEXT-ALIGN: left">Reliable service team, deployed to your location, at your convenience</span></td> 
    </tr> 
    </tbody> 
    </table>

Fuente

2012-08-23 07:31:27 Carlos

-1

yo supongo que podría ser debido a la. Ya no tengo la fuente a mano, pero recuerdo que muchos clientes de correo electrónico, incluido Outlook, no leen.

Fuente

2017-10-23 17:29:32

Cómo alinear verticalmente la imagen y el texto entre las plantillas de correo electrónico del cliente

Respuesta

Cuestiones relacionadas