Блог

Это шаблон электронной почты, поэтому я думаю, что мне следует избегать flex. Есть идеи, почему это не центрировано?

 <div style="display:inline-block; margin: 0 auto;">
  <div style="background-color: #0097e6; border-radius:30px; font-size: 14px; font-weight: 400; padding: 8px 24px 8px 24px; text-align: center; margin: 24px 10px 5px 10px ;">
    <a href="https://example.com/" style="text-decoration:none; color:#ffffff;">See related</a>
  </div>
</div>
 

JSfiddle

Не уверен, что это вариант для вас, но меняется

 display: inline-block;
 

Для

 display: table;
 

выровнял бы кнопку по центру контейнера.

Если это для электронной почты, вы захотите использовать таблицы, потому что Outlook.

Для центрирования вам понадобится, чтобы ширина таблицы была меньше, чем у элемента, в котором вы центрируете, что требует max-width быстрого реагирования на мобильные устройства.

Затем, поскольку Outlook (desktop) не распознает максимальную ширину, вам понадобится оболочка таблицы Outlook.

 <!--[if (gte mso 9)|(IE)]>
            <table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
            <tr>
            <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
            <![endif]-->
<table style="margin:0 auto;width:100%;max-width:600px;"> <!--Core centering code -->
  <tr>
    <td>
      <div style="background-color: #0097e6; border-radius:30px; font-size: 14px; font-weight: 400; padding: 8px 24px 8px 24px; text-align: center; margin: 24px 10px 5px 10px ;">
    <a href="https://example.com/" style="text-decoration:none; color:#ffffff;">See related</a>
  </div>
    </td>
  </tr>
</table>
<!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
            <![endif]-->