Qual é a melhor maneira de centralizar o conteúdo de seu e-mail em HTML na janela do navegador (ou painel de visualização do cliente de e-mail)?

Eu normalmente uso regras CSS para margin:0 autojunto com um contêiner 960 para meu conteúdo baseado em navegador padrão, mas sou novo na criação de e-mail em HTML e tenho o seguinte design que gostaria de centralizar agora na janela do navegador sem CSS padrão .

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

Parece que me lembro de ter visto em algum lugar que isso também pode ser feito envolvendo o design de sua tabela de e-mail em uma tabela externa definida width:100%e usando algum estilo embutido para text-align:centero corpo ou algo assim para fazê-lo?

Existe uma prática recomendada para isso?

Alinhe a mesa ao centro.

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

Onde você tiver "seu conteúdo", se for uma tabela, defina-o com a largura desejada e você terá o conteúdo centralizado.

Para googlers e para completar:

Aqui está uma referência que eu sempre uso quando preciso passar pelo trabalho de implementação de modelos ou assinaturas de e-mail html: http://www.campaignmonitor.com/css/

É uma lista de suporte a CSS para a maioria, senão todas, as opções CSS, bem comparadas entre alguns dos clientes de e-mail mais usados.

Para centralizar, sinta-se à vontade para usar apenas CSS (já que o alignatributo está obsoleto em 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" ... isso alinha o centro da tabela da página.

Usar td align = "center" centraliza o conteúdo dentro desse td, útil para texto alinhado centralizado, mas você terá problemas com alguns clientes de email centralizando o conteúdo em tabelas de subnível, então usando td align como método de nível superior para centralizar seu "contêiner" tabela na página não é a maneira de fazer isso. Em vez disso, use o alinhamento da tabela.

Ainda use sua tabela 100% wrapper também, puramente como um wrapper para o corpo, já que alguns clientes de e-mail não exibem as cores de fundo do corpo, mas irão mostrá-lo com a tabela 100%, então adicione a cor do corpo ao corpo e ao 100 % tabela.

Eu poderia ficar muito tempo falando sobre todas as peculiaridades do desenvolvedor de e-mail html. Tudo o que posso dizer é teste, teste e teste novamente. Litmus.com é uma ótima ferramenta para testar e-mails.

Quanto mais você fizer, mais aprenderá sobre o que funciona em quais clientes de email.

Espero que isto ajude.

Esta é sua solução à prova 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>

Apenas experimente, parece um pouco confuso, mas funciona mesmo com a nova atualização do Firefox para o correio do Yahoo. (não centraliza o e-mail porque substitui a tabela principal por uma div)

CSS em e-mails é uma dor. Você provavelmente precisará de tabelas, infelizmente, porque CSS não é muito suportado em todos os clientes de e-mail.

Dito isso, use um DOCTYPE de transição HTML, não XHTML, e use <center>.

Eu estava lutando com o Outlook e o Office365. Surpreendentemente, o que parecia funcionar foi:

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

Eu apenas listei alguns dos itens principais que resolveram meus problemas de e-mail da Microsoft.

Posso acrescentar que construir um e-mail que fique bem em todos os e-mails é uma dor. Este site foi muito bom para testar: https://putsmail.com/

Ele permite que você liste todos os e-mails para os quais deseja enviar seu e-mail de teste. Você pode colar seu código diretamente na janela, editar, enviar e reenviar. Isso me ajudou muito.

Em alguns casos, margin = "0 auto" não corta a mostarda ao centralizar um e-mail html no Outlook 2007, 2010, 2013.

Experimente o seguinte:

Envolva seu conteúdo em outra tabela com style = "table-layout: fixed;" e alinhar = “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>