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

89

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?

Joel Glovier
fonte
2
"margin: 0px auto" .. apenas para sua informação, quando você usa 0qualquer coisa, você não precisa especificar uma unidade :)
Matt

Respostas:

204

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.

Shadi Almosri
fonte
Existe uma propriedade CSS que faz a mesma coisa? text-align: centernão está fazendo a mesma coisa.
Sawtaytoes
1
Alguns provedores de e-mail exigem este método obsoleto de centralizar objetos. (Estou pensando no Apple Mail).
Drazzah
81
Quando você codifica para layouts de e-mail, você literalmente codifica como se fosse 1999.
Captain Hypertext
Isso faz com que as tabelas filho tenham tds centralizados também no Outlook Web App (OWA), independentemente de terem o alinhamento definido leftou não.
Ishmael
30

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>
Justus Romijn
fonte
6
Não funciona se você estiver centralizando uma mesa ou outro elemento de nível de bloco.
Romano
Você está certo, não tenho certeza se margin: 0 auto;é compatível (em combinação com a width), mas isso geralmente funciona para navegadores, mas não tenho certeza se os clientes de email funcionam bem nessa situação.
Justus Romijn
2
Sim, eu não tinha certeza se todos os navegadores suportariam, então usei a tag <center> confiável, mas obsoleta.
Romano,
10

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.


fonte
7

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)

user3408238
fonte
1
O pequeno "ponto" invisível deve ser substituído por talvez um & nbsp; e as instruções para tornar invisível o pequeno período invisível devem ser abandonadas. Não consegui nem enviar um e-mail de teste para mim mesmo com essas configurações, pois elas foram direto para o inferno do spam de meus provedores :) As defesas de malware estão deixando qualquer cheiro de peixe ainda mais suspeito ... por exemplo: `<td width =" 33% "align = "center" valign = "top"> & nbsp; </td> `
Techmag
6

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

Seb
fonte
4

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.

Trevor Nestman
fonte
2

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>
Anas
fonte
1
Por que usar um tablepara isso se haverá apenas uma linha e uma coluna? Você não está fazendo uso de nenhum recurso do tableelemento.
dg99
você usa uma tabela em e-mail html porque a solução para qualquer problema com e-mail html que funcione em quase todos os clientes envolverá de alguma forma "adicionar outra tabela"
user254694