Question

我正在尝试在同一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>

Example-Image

我不能将img-元素和text-元素分离为单独的TD，因为它必须是包裹图像和文本的单个锚元素。我无法使用锚定元素包装TD，因为它不是HTML有效的，并且无法在Outlook中使用。

有什么建议吗？

问候

Answer 1

将表border-collapse设置为折叠，td padding设置为0，锚点display设置为阻止。这样，锚元素将完全适合您的td，而没有多余的边距。然后只需将img和anchor元素的vertical-align设置为中间，即可将它们对齐在同一行上。

<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>

在Outlook中的同一TD中垂直对齐图像和文本

1 个答案: