Vert-Align изображения и текста в том же TD в Outlook - PullRequest
Новая
       12

Vert-Align изображения и текста в том же TD в Outlook

0 голосов
/ 07 ноября 2018

Я пытаюсь выровнять изображение и текстовый элемент (span) по вертикали в пределах одного и того же TD.

Вот мой код: 

<table bgcolor="#ff0000" style="background-color: #ff0000;">
<tbody>
    <tr>
        <td valign="middle" height="20" style="height: 20px; padding: 5px; vertical-align: middle;">
            <a href="#">
                <img height="20" width="25" style="display: inline; height: 20px; width: 25px; vertical-align: middle;" src="https://s3-eu-west-1.amazonaws.com/files.crsend.com/181000/181395/images/cart.png"/>

                <!--#text_line #-->
                <span style="vertical-align: middle; color: #fff;">&nbsp;10,95€</span>
                <!--#/text_line#-->
            </a>
        </td>
    </tr>
</tbody></table>

Пример-изображения

Я не могу разделить img-элемент и текстовый элемент на отдельные TD, потому что это должен быть один якорный элемент, охватывающий и изображение, и текст. Я не могу обернуть TD в элемент привязки, поскольку он не является HTML-верным и не будет работать в outlook.

Есть предложения?

Привет

1 Ответ

0 голосов
/ 07 ноября 2018

Установите ваш стол border-collapse для свертывания, ваш td padding в 0 и ваш якорь display для блокировки. Таким образом, якорный элемент будет полностью соответствовать вашему тд без лишних полей. Затем просто установите vertical-align в середину для обоих элементов img и anchor, чтобы выровнять их по одной строке. 

<table style="background-color: #ff0000; border-collapse: collapse;">
<tbody>
  <tr>
    <td style="padding: 0;">
      <a href="#" style="display: block; color: #fff; text-decoration: none; padding: 5px;">
        <img src="https://s3-eu-west-1.amazonaws.com/files.crsend.com/181000/181395/images/cart.png" style="height: 20px; width: 25px; vertical-align: middle;" />
        <!--#text_line #-->
        <span style="vertical-align: middle;">&nbsp;10,95€</span>
        <!--#/text_line#-->
      </a>
    </td>
  </tr>
</tbody>
</table>
...