Ссылки не центрируются в ячейке таблицы должным образом в outlook
В зависимости от того, что электронная почта на кислоте показывает мне, я вижу это, где у меня есть некоторые ссылки и текст, сосредоточенный в электронной почте
Но вот как это должно выглядеть, большинство других почтовых клиентов показывают это правильно
Таблица, в которой находятся эти ссылки, выглядит следующим образом
<table class="row bg-white">
<tr>
<td class="wrapper last">
<table class="twelve columns footer">
<tr>
<td class="center">
<center>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/d86f2f3e-fb48-4dac-a901-fb2c6e764ded.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/83304962-c8e5-4e51-95cd-ffbb46fd9386.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/8fbfc755-58dd-4ad3-9df6-31df23b9b4e0.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/acbdc917-00a3-421b-a56f-2b03d3f7c72e.png" />
</a>
<span class="copy">© 2015. All Rights Reserved.</span>
</center>
</td>
<td class="expander"></td>
</tr>
</table><!-- /twelve columns -->
</td>
</tr>
</table><!-- /row -->
Я использую чернильные рамки Zurb для создания этого, и вот правила CSS, которые я добавил
.footer a {
display: inline-block;
}
.footer span.copy {
display: block;
margin-top: 6px;
font-size: 10px;
}
.footer td.center {
padding: 30px 0;
}
Я добавляю эту ссылку JSBin, поскольку в среде Ink происходит множество манипуляций с CSS.
https://jsbin.com/pewoluwapo/edit?html,output
ОБНОВЛЕНИЕ: после попытки ответа Гортонингтона я теперь получаю это в перспективе
3 ответа
Все почтовые клиенты имеют различную поддержку, как и веб-браузеры, это предполагает, что Outlook не поддерживает центральный тег.
Я бы предложил удалить центральный тег и вместо него использовать широко поддерживаемый метод (align="center"). Также не забывайте использовать © вместо реального символа, так как он не всегда поддерживается! Смотрите больше HTML-кодов здесь: http://www.ascii.cl/htmlcodes.htm
<table class="row bg-white">
<tr>
<td class="wrapper last">
<table class="twelve columns footer">
<tr>
<td class="center" align="center">
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/d86f2f3e-fb48-4dac-a901-fb2c6e764ded.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/83304962-c8e5-4e51-95cd-ffbb46fd9386.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/8fbfc755-58dd-4ad3-9df6-31df23b9b4e0.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/acbdc917-00a3-421b-a56f-2b03d3f7c72e.png" />
</a><br/>
<span class="copy">© 2015. All Rights Reserved.</span>
</td>
<td class="expander"></td>
</tr>
</table><!-- /twelve columns -->
</td>
</tr>
</table><!-- /row -->Я думаю, что некоторые условные MSO должны решить это для Outlook. Вы также должны убедиться, что встроены до загрузки (на тот случай, если вы этого еще не сделали), чтобы Gmail и т. Д. Могли читать все ваши CSS.
Ниже приведено только условное MSO и не указано:
<!doctype html>
<html>
<head>
<style>
.footer a {
display: inline-block;
}
.footer span.copy {
display: block;
margin-top: 6px;
font-size: 10px;
}
.footer td.center {
padding: 30px 0;
}
</style>
</head>
<body>
<table class="row bg-white">
<tr>
<td class="wrapper last">
<table class="twelve columns footer">
<tr>
<td class="center">
<center>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/d86f2f3e-fb48-4dac-a901-fb2c6e764ded.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/83304962-c8e5-4e51-95cd-ffbb46fd9386.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/8fbfc755-58dd-4ad3-9df6-31df23b9b4e0.png" />
</a>
<a href="#">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/acbdc917-00a3-421b-a56f-2b03d3f7c72e.png" />
</a>
<!--[if (mso) | (IE)]></center></td></tr><tr><td><center><![endif]-->
<span class="copy">© 2015. All Rights Reserved.</span>
</center>
</td>
<td class="expander"></td>
</tr>
</table><!-- /twelve columns -->
</td>
</tr>
</table><!-- /row -->
</body>
</html>РЕДАКТИРОВАТЬ: В соответствии с вашим комментарием, я копался в JSBin вашего электронного письма и вижу, что проблема заключается в том, что изображения содержат "float: left; clear: both; display: block; ", а также "align='left'" что вызывает его выравнивание по левому краю в таблице. Есть два варианта:
1.) удалить этот код из CSS или после встраивания
2.) Создайте определенную таблицу ширины для социальных сетей и информации об авторских правах. (Это, вероятно, самое совместимое с клиентом решение)
Чтобы не изменять какой-либо существующий код или CSS-код, вставляемый при вставке Zurb INK, - мне нужно было создать таблицу внутри TD на 100%, чтобы очистить выравнивания и блоки / поплавки, которые были унаследованы внутри родительской таблицы, затем я создал еще одна вложенная таблица, в которой хранятся иконки социальных сетей и информация об авторских правах. Затем в верхнем TD этого я создал третью вложенную таблицу, чтобы у значков для каждого был свой TD, не вызывая проблем и не требуя colspan для авторских прав, указанных ниже.
Смотрите ниже, например:(после встраивания вашего кода)
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td align="center">
<table width="230" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td align="center">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td align="center" style="padding:0 5px;">
<a href="#" style="color: #2ba6cb; text-decoration: none; display: inline-block;">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/d86f2f3e-fb48-4dac-a901-fb2c6e764ded.png" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block; border: none;" align="left" /></a>
</td>
<td align="center" style="padding:0 5px;">
<a href="#" style="color: #2ba6cb; text-decoration: none; display: inline-block;">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/83304962-c8e5-4e51-95cd-ffbb46fd9386.png" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block; border: none;" align="left" /></a>
</td>
<td align="center" style="padding:0 5px;">
<a href="#" style="color: #2ba6cb; text-decoration: none; display: inline-block;">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/8fbfc755-58dd-4ad3-9df6-31df23b9b4e0.png" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block; border: none;" align="left" /></a>
</td>
<td align="center" style="padding:0 5px;">
<a href="#" style="color: #2ba6cb; text-decoration: none; display: inline-block;">
<img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/acbdc917-00a3-421b-a56f-2b03d3f7c72e.png" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block; border: none;" align="left" /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding:5px;">
<span class="copy" style="display: block; margin-top: 6px; font-size: 10px;">© 2015. All Rights Reserved.</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
Добавьте следующее правило: http://jsfiddle.net/L9grd3ja/. Таблицы по умолчанию сокращают содержимое.
table {
width: 100%;
}