Zwykle używam reguł CSS margin:0 auto
wraz 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:center
w tekście lub czegoś takiego, aby to zrobić?
Czy istnieje najlepsza praktyka?
html-email
css-tables
Joel Glovier
źródło
źródło
0
czegokolwiek, nie musisz określać jednostki :)Odpowiedzi:
Wyrównaj stół do środka.
Tam, gdzie masz „swoją zawartość”, jeśli jest to tabela, ustaw ją na żądaną szerokość, a zawartość zostanie wyśrodkowana.
źródło
text-align: center
nie robi tego samego.td
w aplikacji Outlook Web App (OWA), bez względu na to, czy mają ustawione wyrównanie,left
czy nie.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ż
align
atrybut jest przestarzałyHTML 4.01
).źródło
margin: 0 auto;
jest obsługiwany (w połączeniu z awidth
), ale zwykle działa to w przypadku przeglądarek, ale nie jestem pewien, czy klienci poczty e-mail dobrze sobie radzą w takiej sytuacji.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
Oto Twoje kuloodporne rozwiązanie:
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)
źródło
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>
.źródło
Walczyłem z Outlookiem i Office365. Zaskakująco, rzecz, która wydawała się działać, to:
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ę.
źródło
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”.
źródło
table
do tego celu, jeśli będzie tylko jeden wiersz i jedna kolumna? Nie używasz żadnych funkcjitable
elementu.