Jaki jest najlepszy sposób na wyśrodkowanie treści wiadomości e-mail w formacie HTML w oknie przeglądarki (lub okienku podglądu klienta poczty e-mail)?

Zwykle używam reguł CSS margin:0 autowraz z kontenerem 960 dla mojej standardowej zawartości opartej na przeglądarce, ale jestem nowy w tworzeniu wiadomości e-mail w formacie HTML i mam następujący projekt, który chciałbym teraz wyśrodkować w oknie przeglądarki bez standardowego CSS .

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

Wydaje mi się, że widziałem gdzieś, że można to również osiągnąć, opakowując projekt tabeli e-maili w tabelę zewnętrzną ustawioną na width:100%i używając jakiegoś stylu wbudowanego text-align:centerw tekście lub czegoś takiego, aby to zrobić?

Czy istnieje najlepsza praktyka?

Wyrównaj stół do środka.

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

Tam, gdzie masz „swoją zawartość”, jeśli jest to tabela, ustaw ją na żądaną szerokość, a zawartość zostanie wyśrodkowana.

Dla pracowników Google i ze względu na kompletność:

Oto odniesienie, którego zawsze używam, gdy muszę przejść przez ból związany z implementacją szablonów e-maili html lub podpisów: http://www.campaignmonitor.com/css/

Nie jest to lista wsparcia CSS dla większości, jeśli nie wszystkich, opcji CSS, ładnie porównana między niektórymi z najczęściej używanych klientów poczty e-mail.

Aby wyśrodkować, możesz po prostu użyć CSS (ponieważ alignatrybut jest przestarzały 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" ... to wyrównuje środek tabeli na stronie.

Użycie td align = "center" wyśrodkowuje zawartość wewnątrz tego td, przydatne w przypadku wyśrodkowanego tekstu wyrównanego, ale będziesz mieć problemy z wyśrodkowywaniem zawartości w tabelach niższego poziomu przez niektórych klientów poczty e-mail, więc używanie td align jako metody najwyższego poziomu wyśrodkowania "kontenera" tabela na stronie nie jest do tego sposobem. Zamiast tego użyj wyrównania tabeli.

Nadal używaj również swojego stołu w 100% owijającego, wyłącznie jako opakowania dla ciała, ponieważ niektórzy klienci poczty e-mail nie wyświetlają kolorów tła treści, ale pokażą je w tabeli 100%, więc dodaj swój kolor ciała zarówno do treści, jak i 100 % stół.

Mógłbym przez wieki opowiadać o wszystkich dziwactwach związanych z programowaniem e-maili w html. Wszystko, co mogę powiedzieć, to test, test i test ponownie. Litmus.com to świetne narzędzie do testowania wiadomości e-mail.

Im więcej robisz, tym więcej dowiesz się, co działa w jakich klientach poczty e-mail.

Mam nadzieję że to pomoże.

Oto Twoje kuloodporne rozwiązanie:

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

Po prostu wypróbuj, wygląda trochę niechlujnie, ale działa nawet z nową aktualizacją Firefox dla poczty Yahoo. (nie wyśrodkowuje e-maila, ponieważ zastępuje główną tabelę elementem div)

CSS w e-mailach to ból. Prawdopodobnie będziesz niestety potrzebować tabel, ponieważ CSS nie jest dobrze obsługiwany we wszystkich klientach poczty e-mail.

To powiedziawszy, użyj HTML Transitional DOCTYPE, a nie XHTML i użyj <center>.

Walczyłem z Outlookiem i Office365. Zaskakująco, rzecz, która wydawała się działać, to:

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

Wymieniłem tylko niektóre z kluczowych rzeczy, które rozwiązały moje problemy z pocztą e-mail Microsoft.

Dodam, że tworzenie e-maila, który ładnie wygląda na wszystkich e-mailach, jest uciążliwe. Ta strona była bardzo miła do testowania: https://putsmail.com/

Umożliwia wyświetlenie wszystkich e-maili, na które chcesz wysłać testową wiadomość e-mail. Możesz wkleić kod bezpośrednio do okna, edytować, wysyłać i ponownie wysyłać. Pomogło mi to tonę.

W niektórych przypadkach margin = „0 auto” nie spowoduje wycięcia musztardy podczas wyśrodkowania wiadomości e-mail html w programie Outlook 2007, 2010, 2013.

Spróbuj wykonać następujące czynności:

Umieść zawartość w innej tabeli z style = "table-layout: fixed;" and align = „center”.

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