Come centrare una newsletter via email dal publisher?


1

Quando creo una newsletter e-mail in un editore e poi la invio via e-mail, la newsletter entra nella pagina sul lato sinistro dell'email. Come centrare la newsletter all'interno dell'e-mail?


Dipende dal programma del client di posta elettronica. Dal momento che non è possibile controllare quale programma di posta elettronica viene utilizzato dagli utenti finali, è piuttosto un esercizio inutile cercare di risolverlo.
DavidPostill

Risposte:


0

Ecco una versione di base del codice che uso per creare email incentrate sui client di posta elettronica. Funziona su tutti i client di posta elettronica (anche Outlook, Gmail, ecc.), Inclusi i dispositivi mobili.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title></title>

    <style>

        /* What it does: Remove spaces around the email design added by some email clients. */
        html,
        body {
            margin: 0 auto !important;
            padding: 0 !important;
            height: 100% !important;
            width: 100% !important;
        }

        /* What it does: Centers email on Android 4.4 */
        div[style*="margin: 16px 0"] {
            margin:0 !important;
        }

        /* What it does: Stops Outlook from adding extra spacing to tables. */
        table,
        td {
            mso-table-lspace: 0pt !important;
            mso-table-rspace: 0pt !important;
        }

        /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
        table {
            border-spacing: 0 !important;
            border-collapse: collapse !important;
            table-layout: fixed !important;
            margin: 0 auto !important;
        }
        table table table {
            table-layout: auto; 
        }

    </style>


</head>
<body width="100%" bgcolor="#ffffff" style="margin: 0;">
    <center style="width: 100%; background: #ffffff;">

        <div style="max-width: 680px; margin: auto;">
            <!--[if mso]>
            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
            <tr>
            <td>
            <![endif]-->

            <!-- Centered Email : BEGIN -->
            <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
                <tr>
                    <td style="">
                       EMAIL CONTENT GOES HERE
                    </td>
                </tr>
            </table>
            <!-- Centered Email : END -->

            <!--[if mso]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </div>
    </center>
</body>
</html>

Codice completo disponibile qui .

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.