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

93

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?

Joel Glovier
źródło
2
"margin: 0px auto" .. tylko do Twojej wiadomości, kiedy używasz 0czegokolwiek, nie musisz określać jednostki :)
Matt

Odpowiedzi:

212

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.

Shadi Almosri
źródło
Czy istnieje właściwość CSS, która robi to samo? text-align: centernie robi tego samego.
Kevin Ghadyani,
1
Niektórzy dostawcy poczty e-mail wymagają tej przestarzałej metody centrowania obiektów. (Myślę o Apple Mail).
Drazzah
84
Kiedy kodujesz układy wiadomości e-mail, kodujesz dosłownie tak, jak w 1999 r.
Captain Hypertext
Powoduje to, że tabele podrzędne mają również wyśrodkowane tabele tdw aplikacji Outlook Web App (OWA), bez względu na to, czy mają ustawione wyrównanie, leftczy nie.
Ishmael,
30

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>
Justus Romijn
źródło
6
Nie działa, jeśli wyśrodkowujesz tabelę lub inny element na poziomie bloku.
Roman
Masz rację, nie jestem pewien, czy margin: 0 auto;jest obsługiwany (w połączeniu z a width), ale zwykle działa to w przypadku przeglądarek, ale nie jestem pewien, czy klienci poczty e-mail dobrze sobie radzą w takiej sytuacji.
Justus Romijn
2
Tak, nie byłem pewien, czy wszystkie przeglądarki będą go obsługiwać, więc zastosowałem sprawdzony, ale wycofany tag <center>.
Roman
10

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.


źródło
7

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)

user3408238
źródło
1
Mały niewidoczny „kropka” powinien zostać zastąpiony być może & nbsp; a instrukcje uczynienia małego niewidocznego okresu niewidocznym należy pominąć. Nie mogłem nawet przesłać testowego e-maila do siebie z tymi ustawieniami, ponieważ trafiły one prosto do piekła spamującego moich dostawców :) Ochrona przed złośliwym oprogramowaniem sprawia, że ​​każdy podejrzany zapach jest jeszcze bardziej podejrzany ... np .: `<td width =" 33% "align = "center" valign = "top"> & nbsp; </td> `
Techmag
6

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

Seb
źródło
5

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

Trevor Nestman
źródło
Dziękuję, to zadziałało dla mnie. Próbowałem
wyśrodkować
2

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>
Anas
źródło
1
Po co używać tabledo tego celu, jeśli będzie tylko jeden wiersz i jedna kolumna? Nie używasz żadnych funkcji tableelementu.
dg99
używasz tabeli w e-mailu html, ponieważ rozwiązanie każdego problemu z pocztą e-mail html, które będzie działać na prawie wszystkich klientach, będzie w jakiś sposób wymagało „dodania kolejnej tabeli”
użytkownik254694