Таблица не центрирована в outlook 365 - PullRequest
0 голосов
/ 30 апреля 2020

У меня есть стол в таблице, и стол по какой-то причине не центрируется. Я не могу понять, почему, может быть, VML как-то возиться с этим? Тег h3 над таблицей, кажется, центрируется очень хорошо. У меня фон стола синий, чтобы я мог видеть его чище. Вот мой шаблон электронной почты:

<body>
  <div style="text-align: center; padding: -8px; font-family: brandon-grotesque-regular, Lato, sans-serif;">
    <table style="width: 100%; text-align: center;" cellpadding="0" cellspacing="0" border="0" align="center">
      <tbody>
        <tr style="text-align: center;">
          <td align="center" bgcolor="#ffffff" background="http://f52c38c7.ngrok.io/y6_warrior_challenge_email/images/bg_y6.png" valign="top" style="background-image: url('http://f52c38c7.ngrok.io/y6_warrior_challenge_email/images/bg_y6.png'); background-repeat: no-repeat; background-position: center; background-size: contain; background-color: #ffffff; text-align: center; align: center;" width="680" height="960">

            <!--[if gte mso 9]>
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 510pt; height:720pt;">
            <v:fill type="frame" src="https://image.freepik.com/free-vector/elegant-white-texture-background_23-2148431731.jpg" color="#ffffff" />
            <v:textbox inset="0,0,0,0">
            <![endif]-->
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding: 48px;">
              <tbody>
                <tr>
                  <td align="center" style="text-align: center;">
                    <h3 style="color: #043d52; font-size: 32px; font-weight: bolder; padding: 32px 0 32px 0; margin: 0">
                      this is text
                    </h3>
                    <center>
                      <table align="center" style="background: blue; text-align: center;">

                        <tbody>
                          <tr>
                            <td valign="middle" style="vertical-align: middle !important; padding: 0; text-align: center;">
                              <img style="max-height: 145px; width: 100%;" alt="Shirt image" src="https://i.picsum.photos/id/350/536/354.jpg">
                            </td>



                            <td valign="middle" style="vertical-align: middle !important; padding: 0; text-align: center;">
                              <img style="max-height: 79px; width: 100%;" alt="Hat image" src="https://i.picsum.photos/id/350/536/354.jpg">
                            </td>

                            <td valign="middle" style="vertical-align: middle !important; padding: 0; text-align: center;">
                              <img style="max-height: 139px;" alt="Water bottle image" src="https://i.picsum.photos/id/350/536/354.jpg">
                            </td>


                            <td valign="middle" style="vertical-align: middle !important; padding: 0; text-align: center;">
                              <img style="max-height: 136px; width: 100%;" alt="Hoodie image" src="https://i.picsum.photos/id/350/536/354.jpg">
                            </td>

                          </tr>
                          <tr>

                            <td valign="top" style="vertical-align: top !important; padding: 0; text-align: center;">
                              <p style="color: #676767; font-weight: bolder;">text</p>
                            </td>

                            <td valign="top" style="vertical-align: top !important; padding: 0; text-align: center;">
                              <p style="color: #676767; font-weight: bolder;">text</p>
                            </td>

                            <td valign="top" style="vertical-align: top !important; padding: 0; text-align: center;">
                              <p style="color: #676767; font-weight: bolder;">text</p>
                            </td>

                            <td valign="top" style="vertical-align: top !important; padding: 0; text-align: center;">
                              <p style="color: #676767; font-weight: bolder;">text</p>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </center>
                  </td>
                </tr>
              </tbody>
            </table>
            <!--[if gte mso 9]>
            </v:textbox>
            </v:rect>
            <![endif]-->
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

Вот как это выглядит в outlook 365: email picture

Я выделил фон серым, чтобы вы могли видеть это яснее, но синий стол определенно не по центру. Я даже пытался использовать тег <center>, но он все еще не работает. Я был бы очень признателен за помощь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...