Это очень просто, и при тестировании с Litmus он дает одинаковые результаты для всех почтовых клиентов. Я установил размер шрифта, высоту строки и размер изображения на 13 пикселей. Поскольку все они были равны, это облегчило выравнивание. Я не поместил выравнивание в таблицу, потому что это должно по умолчанию для выравнивания по середине. На изображении, которое я поместил vertical-align: -2px;
Outlook имеет поддержку с ошибками, когда дело доходит до использования значений типа middle
, но не с числовыми значениями. в таблицу стилей и добавил display: inline-block;
. Я поместил все в один <td>
.
С Gmail, Apple, IOS, Android и другими почтовыми клиентами все остается согласованным. В Outlook он сдвигается примерно на пиксель.
Я также добавил text-decoration: none;
к hrefs, чтобы немного очистить внешний вид.
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: 0;">
<tr>
<td style="font-family: sans-serif; font-size: 13px; line-height: 13px; text-decoration: none;">
<a href="tel:5555555555" style="font-size: 13px; text-decoration: none;">555-555-5555</a> |
<a href="https://stackoverflow.com" style="font-size: 13px; text-decoration: none;">stackoverflow.com</a> |
<a href="https://www.linkedin.com/company/stack-overflow/"><img src="https://i.ibb.co/hf2gbC1/in.png" style="vertical-align: -2px;" alt="United States Appraisals LinkedIn" width="13" height="13"></a>
</td>
</tr>
</table>
Удачи.