Как выровнять текстовую ссылку рядом со ссылкой на изображение в строке таблицы только со встроенными стилями? - PullRequest
0 голосов
/ 09 января 2019

У меня проблема с выравниванием текста и ссылки на изображение рядом друг с другом в строке таблицы. Изображение продолжает дрейфовать вверх и вниз. Я попробовал различные стили выравнивания среднего и блочного дисплея без удачи. Я ограничен только наличием встроенного CSS-кода и стараюсь правильно отображать его на разных устройствах и почтовых клиентах. Размещенный код представляет собой вложенную таблицу, которую я не могу заставить элементы выровнять друг с другом. Просмотр кода в браузере, по большей части, отображается правильно. Но когда код находится в Outlook и других программах, изображение смещается в строке.

пример изображения

<table cellspacing="0" cellpadding="0">
<td height="100%" align="left">
<a href="tel:5555555555" style="font-size: 13px;">555-555-5555 | </a>
</td>
<td height="100%" align="left">
<a href="https://stackoverflow.com" style="font-size: 13px">stackoverflow.com  | </a>
</td>
<td height="100%" align="left" font-size="13px" style="font-size: 13px; line-height:100%;">
<a href="https://www.linkedin.com/company/stack-overflow/"><img src="https://i.ibb.co/hf2gbC1/in.png" style="margin-left: 4px; margin-right: 2px" alt="Stack Overflow LinkedIn" width="11" height="11"></a>
</td>
</table>

Ответы [ 3 ]

0 голосов
/ 09 января 2019

Я бы использовал valign="bottom" для всех td с и, кроме того, добавил бы немного padding-bottom к тегу img, чтобы исправить небольшое вертикальное смещение между текстом и изображением (фактически только 1px в этом конкретном примере):

<table cellspacing="0" cellpadding="0">
<td height="100%" align="left" valign="bottom">
<a href="tel:5555555555" style="font-size: 13px;">555-555-5555 | </a>
</td>
<td height="100%" align="left" valign="bottom">
<a href="https://stackoverflow.com" style="font-size: 13px">stackoverflow.com  | </a>
</td>
<td height="100%" align="left" font-size="13px" style="font-size: 13px; line-height:100%;" valign="bottom">
<a href="https://www.linkedin.com/company/stack-overflow/"><img src="https://i.ibb.co/hf2gbC1/in.png" style="margin-left: 4px; margin-right: 2px; padding-bottom: 1px;" alt="United States Appraisals LinkedIn" width="11" height="11"></a>
</td>
</table>
0 голосов
/ 09 января 2019

Это очень просто, и при тестировании с 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>

Удачи.

0 голосов
/ 09 января 2019

написание html для электронной почты похоже на путешествие назад к 90-ым !

, если вы обернете все свои <td> в tabelrow <tr> и установите его значение в нижней части,

просто запустите фрагмент кода:

<table cellspacing="0" cellpadding="0">
  <tr height="20px" valign="bottom" bgcolor="#FFFFCC" >
    <td height="100%" align="left">
      <a href="tel:5555555555" style="font-size: 13px;">555-555-5555 | </a>
    </td>
    <td height="100%" align="left">
      <a href="https://stackoverflow.com" style="font-size: 13px">stackoverflow.com  | </a>
    </td>
    <td height="100%" align="left" font-size="13px" style="font-size: 13px; line-height:100%;">
      <a href="https://www.linkedin.com/company/stack-overflow/"><img src="https://i.ibb.co/hf2gbC1/in.png" style="margin-left: 4px; margin-right: 2px" alt="United States Appraisals LinkedIn" width="11" height="11"></a>
    </td>
  </tr>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...