¿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)?

93

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?

html-email  css-tables 
— Joel Glovier
fuente
2
"margin: 0px auto" ... solo para su información, cuando usa 0cualquier cosa, no necesita especificar una unidad :)
— Matt

Respuestas:

212

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.

— Shadi Almosri
fuente
¿Existe una propiedad CSS que haga lo mismo? text-align: centerno está haciendo lo mismo.
— Kevin Ghadyani
1
Algunos proveedores de correo electrónico requieren este método obsoleto para centrar objetos. (Estoy pensando en Apple Mail).
— Drazzah
84
Cuando codifica para diseños de correo electrónico, literalmente codifica como si fuera 1999.
— Capitán Hipertexto
Esto hace que las tablas secundarias también tengan tds centrados en Outlook Web App (OWA), sin importar si tienen la alineación configurada lefto no.
— Ismael
30

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>
— Justus Romijn
fuente
6
No funciona si está centrando una mesa u otro elemento a nivel de bloque.
— Roman
Tiene razón, no estoy seguro de si margin: 0 auto;es compatible (en combinación con a width), pero eso generalmente funciona para los navegadores, pero no estoy seguro de si los clientes de correo electrónico funcionan bien en esa situación.
— Justus Romijn
2
Sí, no estaba seguro de si todos los navegadores lo admitirían, así que opté por la etiqueta <center> confiable pero obsoleta.
— romano
10

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.

7

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)

— user3408238
fuente
1
El pequeño "punto" invisible debería sustituirse por quizás un & nbsp; y las instrucciones para hacer invisible el pequeño período invisible deben eliminarse. Ni siquiera pude enviarme un correo electrónico de prueba con esa configuración, ya que fueron directamente al infierno de spam de mis proveedores :) Las defensas de malware están haciendo que cualquier cosa huele a pescado aún más a pescado ... p. = "center" valign = "top"> & nbsp; </td> `
— Techmag
6

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>.

— Seb
fuente
5

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.

— Trevor Nestman
fuente
Gracias, esto funcionó para mí. Estaba tratando de
— centrar
2

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>
— Anas
fuente
1
¿Por qué usar un tablepara esto si solo habrá una fila y una columna? No está utilizando ninguna función del tableelemento.
— dg99
utiliza una tabla en el correo electrónico html porque la solución a cualquier problema con el correo electrónico html que funcionará en casi todos los clientes de alguna manera implicará "agregar otra tabla"
— user254694
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.