Question

我在<tr>元素中有一个HTML电子邮件模板的以下代码，但内容没有垂直居中，有什么问题？

<td data-color="text" data-size="size navigation" data-min="10" data-max="22" data-link-style="text-decoration:none; color:#888;" class="nav" align="center" style="font:12px/16px 'Open Sans', Arial, Helvetica, sans-serif;color:#797c82;padding:0 0 0px;text-align:center;vertical-align:middle">
    Follow us on:
    <a target="_blank" style="text-decoration:none; color:#222; text-transform:uppercase; font-weight:500; letter-spacing:0.02em;" href="#"><img src="https://gallery.mailchimp.com/0a299e4be1a957c04c669703f/images/8c3bae94-bf27-4fc5-b932-9bc1d0b4c424.png" border="0" vspace="0" hspace="0" width="40" height="40" alt="crisalix.com"></a> &nbs
    <a target="_blank" style="text-decoration:none; color:#222; text-transform:uppercase;font-weight:500; letter-spacing:0.02em;" href="#"><img src="https://gallery.mailchimp.com/0a299e4be1a957c04c669703f/images/c658470a-038f-4e90-8bc0-baae91b6ae41.png" border="0" vspace="0" hspace="0" width="40" height="40" alt="crisalix.com"></a>
</td>

Answer 1

将vertical-align:middle添加到图片本身。您的p;中还缺少 ，但我认为这是一个错字。

<table>
  <tr>
    <td data-color="text" data-size="size navigation" data-min="10" data-max="22" data-link-style="text-decoration:none; color:#888;" class="nav" align="center" style="font:12px 'Open Sans', Arial, Helvetica, sans-serif;color:#797c82;padding:0 0 0px;text-align:center;">
Follow us on:

    <a target="_blank" style="text-decoration:none; color:#222; text-transform:uppercase; font-weight:500; letter-spacing:0.02em;" href="#"><img src="https://gallery.mailchimp.com/0a299e4be1a957c04c669703f/images/8c3bae94-bf27-4fc5-b932-9bc1d0b4c424.png" border="0" vspace="0" hspace="0" width="40" height="40" alt="crisalix.com" style="vertical-align:middle;"></a> &nbsp;
    <a target="_blank" style="text-decoration:none; color:#222; text-transform:uppercase;font-weight:500; letter-spacing:0.02em;" href="#"><img src="https://gallery.mailchimp.com/0a299e4be1a957c04c669703f/images/c658470a-038f-4e90-8bc0-baae91b6ae41.png" border="0" vspace="0" hspace="0" width="40" height="40" alt="crisalix.com" style="vertical-align:middle;"></a>
    </td>
  </tr>
</table>

内容不在表格行中居中垂直

1 个答案: