¿Cuál es la mejor manera de centrar el contenido de su correo electrónico HTML en la ventana del navegador (o el panel de vista previa del cliente de correo electrónico)?

Normalmente uso reglas CSS margin:0 autojunto con un contenedor 960 para mi contenido estándar basado en navegador, pero soy nuevo en la creación de correo electrónico HTML y tengo el siguiente diseño que me gustaría centrar ahora en la ventana del navegador sin CSS estándar .

http://static.helpcurenow.org/mockups/emails/2010/may-survey/survey.html

Me parece recordar haber visto en algún lugar que también se puede lograr envolviendo el diseño de su tabla de correo electrónico en una tabla externa configurada width:100%y usando algún estilo en línea para text-align:centerel tbody o algo así para hacerlo

¿Existe una buena práctica para esto?

Alinee la mesa al centro.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            Your Content
        </td>
    </tr>
</table>

Donde tienes "tu contenido" si es una tabla, configúralo con el ancho deseado y tendrás contenido centrado.

Por el bien de los googlers y la integridad:

Aquí hay una referencia que siempre uso cuando necesito pasar por el dolor de implementar firmas o plantillas de correo electrónico html: http://www.campaignmonitor.com/css/

Es una lista de compatibilidad con CSS para la mayoría, si no todas, las opciones de CSS, muy bien comparadas entre algunos de los clientes de correo electrónico más utilizados.

Para centrar, no dude en usar CSS (ya que el alignatributo está obsoleto HTML 4.01).

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td style="text-align: center;">
            Your Content
        </td>
    </tr>
</table>

table align = "center" ... esto alinea el centro de la tabla de la página.

El uso de td align = "center" centra el contenido dentro de ese td, útil para texto alineado centrado, pero tendrá problemas con algunos clientes de correo electrónico que centran el contenido en tablas de subnivel, por lo que el uso de td align como método de nivel superior para centrar su "contenedor" tabla en la página no es la forma de hacerlo. En su lugar, utilice la alineación de la tabla.

Todavía use su tabla de envoltura 100% también, simplemente como envoltura para el cuerpo, ya que algunos clientes de correo electrónico no muestran los colores de fondo del cuerpo, pero lo mostrarán con la tabla del 100%, así que agregue el color de su cuerpo tanto al cuerpo como al 100. % mesa.

Podría seguir y seguir durante años sobre todas las peculiaridades del desarrollador de correo electrónico html. Todo lo que puedo decir es prueba, prueba y prueba de nuevo. Litmus.com es una gran herramienta para probar correos electrónicos.

Cuanto más haga, más aprenderá sobre qué funciona en qué clientes de correo electrónico.

Espero que esto ayude.

Aquí está su solución a prueba de balas:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="33%" align="center" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:2px; color:#ffffff;">.</td>
    <td width="35%" align="center" valign="top">
      CONTENT GOES HERE
    </td>
    <td width="33%" align="center" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:2px; color:#ffffff;">.</td>
  </tr>
</table>

Pruébelo, parece un poco complicado, pero funciona incluso con la nueva actualización de Firefox para el correo de Yahoo. (no centra el correo electrónico porque reemplaza la tabla principal por un div)

CSS en los correos electrónicos es una molestia. Desafortunadamente, probablemente necesitará tablas, porque CSS no es muy compatible con todos los clientes de correo electrónico.

Dicho esto, use un DOCTYPE de transición HTML, no XHTML, y use <center>.

Estaba luchando con Outlook y Office365. Sorprendentemente, lo que pareció funcionar fue:

<table align='center' style='text-align:center'>
  <tr>
    <td align='center' style='text-align:center'>
      <!-- AMAZING CONTENT! -->
    </td>
  </tr>
</table>

Solo enumeré algunas de las cosas clave que resolvieron mis problemas de correo electrónico de Microsoft.

Debo agregar que crear un correo electrónico que se vea bien en todos los correos electrónicos es una molestia. Este sitio web fue muy bueno para probar: https://putsmail.com/

Le permite enumerar todos los correos electrónicos a los que le gustaría enviar su correo electrónico de prueba. Puede pegar su código directamente en la ventana, editarlo, enviarlo y reenviarlo. Me ayudó un montón.

En algunos casos, margin = "0 auto" no cortará la mostaza al alinear en el centro un correo electrónico html en Outlook 2007, 2010, 2013.

Intente lo siguiente:

Envuelva su contenido en otra tabla con style = "table-layout: fixed;" y alinear = "centro".

<!-- WRAPPING TABLE -->
<table cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed;" align="center">
  <tr>
    <td>
      <!-- YOUR TABLES AND EMAIL CONTENT GOES HERE -->
    </td>
  </tr>
</table>