Электронная почта не центрируется в Outlook - PullRequest
Новая
       5

Электронная почта не центрируется в Outlook

0 голосов
/ 21 сентября 2018

У меня была такая проблема много раз, и я не могу понять, что я делаю неправильно.Я пробовал несколько разных исправлений, и независимо от того, что я делаю, моя электронная почта так или иначе сдвигается влево в большинстве версий Outlook и на iPad Pro.Я пытаюсь центрировать это, но все еще быть отзывчивым.

Если вы можете это исправить, вы будете моим героем.Вот мой код: 

    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="format-detection" content="telephone=no"> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />

    <style type="text/css">
    /* CLIENT-SPECIFIC STYLES */
    body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
    img { -ms-interpolation-mode: bicubic; }


    /* RESET STYLES */
    img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
    table { border-collapse: collapse !important; }
    body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; background-color: #eeedea !important;}


    a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    }


    @media screen and (max-width: 470px) {
    .responsive-table {
    width: 100% !important;
    max-width: 600px !important;
    }

    .img-max {
    width: 100% !important;
    max-width: 100px !important;
    height: auto !important;
    }


    .mobile-font{
    font-size: 12px !important;
    }

    .mobile-header{
    font-size: 14px !important;
    padding: 10px 30px 5px 30px !important;
    }


    .footer {
    padding: 15px 0px 0px 0px !important;
    }
    }

    div[style*="margin: 16px 0;"] { margin: 0 !important; }
    </style>
    </head>
    <body style="margin: 0 !important; padding: 0; !important background-color: #eeedea;" bgcolor="#eeedea">

    <!-- HIDDEN PREHEADER TEXT -->
    <div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
Preheader 
    </div>

    <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#eeedea" align="center"  style="width: 100%;">
    <tr>
    <td align="center" valign="top" bgcolor="#eeedea">

    <!--[if (gte mso 9)|(IE)]>
    <table align="center" border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#eeedea">
    <tr>
    <td align="center" valign="top" width="600">
    <![endif]-->
    <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#eeedea" style="max-width: 600px;" align="center" class="responsive-table">


    <tr>
    <td align="center" valign="top" style="padding: 20px 0px 10px 0px;" bgcolor="#eeedea">
    <!--[if (gte mso 9)|(IE)]>
    <table align="center" border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#eeedea">
    <tr>
    <td align="center" valign="top" width="600">
    <![endif]-->
    <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#eeedea" style="max-width: 600px;" align="center" class="responsive-table">
    <tr>
    <td align="center" valign="top" style="padding: 0px 10px 5px 10px;">
    Having problems seeing this message? <a href="" target="_blank">View in your browser</a>
    </td>
    </tr>
    </table>
    <!--[if (gte mso 9)|(IE)]>
    </td>
    </tr>
    </table>
    <![endif]-->
    </td>
    </tr>


    <tr>
    <td align="center" valign="top" style="padding: 0px;" bgcolor="#eeedea">
    <!--[if (gte mso 9)|(IE)]>
    <table align="center" border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#ffffff">
    <tr>
    <td align="center" valign="top" width="600">
    <![endif]-->
    <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#eeedea" style="max-width: 600px;" align="center">

    <tr>
    <td align="center" valign="top" bgcolor="#ffffff" style="padding: 30px 10px 10px 10px;">
    <a href="#" target="_blank">
    <img src="" width="100" border="0" style="display: block;" class="img-max" alt=""></a>
    </td>
    </tr>

    </table>
    <!--[if (gte mso 9)|(IE)]>
    </td>
    </tr>
    </table>
    <![endif]-->
    </td>
    </tr>

    <tr>
    <td align="center" valign="top" style="padding: 0px;" bgcolor="#eeedea">
    <!--[if (gte mso 9)|(IE)]>
    <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
    <tr>
    <td align="center" valign="top" width="600">
    <![endif]-->
    <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffffff" style="max-width: 600px;" align="center" class="responsive-table">
    <tr>
    <td align="center" valign="top" style="padding: 30px 30px 0px 30px; color: #000000; text-align: center;" bgcolor="#ffffff" class="mobile-font">

    Body</td></tr>

    <tr>
    <td align="center" width="600" valign="top" bgcolor="#ffffff" style="padding: 0px 0px 0px 0px;">
    <img src="" width="600" border="0" style="display: block !important;" class="img-icon" alt="">
    </td>
    </tr>



    </table>
    <!--[if (gte mso 9)|(IE)]>
    </td>
    </tr>
    </table>
    <![endif]-->
    </td>
    </tr>

    <tr>
    <td align="center" valign="top" style="padding: 0px;" class="footer" bgcolor="#eeedea">
    <!--[if (gte mso 9)|(IE)]>
    <table align="center" border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#eeedea">
    <tr>
    <td align="center" valign="top" width="600">
    <![endif]-->
    <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#eeedea" style="max-width: 600px;" align="center" class="responsive-table">

    <tr>
    <td align="center" bgcolor="#eeedea" style="padding: 10px 0px 0px 0px;">
    <table cellspacing="0" cellpadding="0" border="0" width="90" align="center">

    <tr>
    <td align="center" width="30">
    <a href="#" target="_blank"><img alt="Facebook" src="" style="padding: 0px;" width="30"/></a></td>
    <td align="center" width="30">                          
    <a href="" target="_blank"><img alt="Twitter" src="" style="padding: 0px;" width="30"/></a></td>


    <td align="center" width="30">
    <a href="" target="_blank"><img alt="Instagram" src="" width="30" style="padding: 0px;"/></a></td>



    </tr>

    </table>
    </td>
    </tr>

    <tr>
    <td align="center" valign="top" bgcolor="#eeedea" style="padding: 0px 15px 0px 15px;">
    <!--[if (gte mso 9)|(IE)]>
    <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
    <tr>
    <td align="center" valign="top" width="600">
    <![endif]-->
    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" class="responsive-table">
    <tr>
    <td align="center" valign="top" style="padding: 0px 0 10px 0;" bgcolor="#eeedea" class="mobile-font">
    <!--[if (gte mso 9)|(IE)]>
    <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
    <tr>
    <td align="center" valign="top" width="600">
    <![endif]-->
    <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#eeedea" style="max-width: 600px;" align="center" class="responsive-table">

    <tr>
    <td align="center" bgcolor="#eeedea" style="padding: 0px;">
    <!--[if (gte mso 9)|(IE)]>
    <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
    <tr>
    <td align="center" valign="top" width="600">
    <![endif]-->
    <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#eeedea" style="max-width: 600px;" align="center" class="responsive-table">
    <tr>
    <td align="center" valign="top" style="padding: 0px; color: #000000; text-align: center;">
    <p style="text-align: center;">
    &copy; Company
    <span>&nbsp;|&nbsp;</span>
    Location
    <br>
    <a href="#" target="_blank" style="text-decoration: underline;">Website</a>
    </p>
    </td>
    </tr>
    </table>
    <!--[if (gte mso 9)|(IE)]>
    </td>
    </tr>
    </table>
    <![endif]-->
    </td>
    </tr>

    </table>
    <!--[if (gte mso 9)|(IE)]>
    </td>
    </tr>
    </table>
    <![endif]-->
    </td>
    </tr>

    </table>
    <!--[if (gte mso 9)|(IE)]>
    </td>
    </tr>
    </table>
    <![endif]-->
    </td>
    </tr>           



    </table>
    <!--[if (gte mso 9)|(IE)]>
    </td>
    </tr>
    </table>
    <![endif]-->
    </td>
    </tr>


    </table>
    <!--[if (gte mso 9)|(IE)]>
    </td>
    </tr>
    </table>
    <![endif]-->

    </td>
    </tr>
    </table>
    </body>
    </html>

1 Ответ

0 голосов
/ 26 сентября 2018

Вы можете попробовать с <div align="center" style="width: 100%;"></div> во всем, это работает для нас в наших шаблонах на всех устройствах.

Так, например. 

<div align="center" style="width: 100%;">
 <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="" width="620">
 <tr>
  <td>Hello world</td>
 </tr>
 </table>
</div>
...