У меня есть стол в таблице, и стол по какой-то причине не центрируется. Я не могу понять, почему, может быть, 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:
Я выделил фон серым, чтобы вы могли видеть это яснее, но синий стол определенно не по центру. Я даже пытался использовать тег <center>
, но он все еще не работает. Я был бы очень признателен за помощь.