如何控制图像高度以匹配 html 电子邮件中的相邻文本

Question

我的电子邮件中有这个 html:
<li><h4>Sample Text 31 <small><img src="<link to image>"></small></h4></li>

图片未对齐，img 标签的高度宽度远大于文本大小。见下文

我怎样才能使图片显示在文本旁边并且大小相同？

Answer 1

您可以将 li 标签显示为 table 并将其子标签显示为单元格。然后垂直对齐中间的内容

下面的片段

li {
 display:table;
  vertical-align:middle;

}
li *{
  display:table-cell;
  border:solid red;
vertical-align:middle;
}

<li><h4>Sample Text 31 </h4><small><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbmbMn9M5hlfXUXtw0a_ZsH3aS0HWvXT0eZiDeFauNmJOInHgm"></small></li>

Answer 2

为了支持大多数电子邮件客户端，我会将此内容放在实际的 table 中，如果需要，您可以使用 valign 属性。 valign 在这里 chrome 似乎没有必要，但它可能是为了展望。您可以将 valign="middle" 添加到 td。您也可以将文本和图像放在一个 td 中并使用 valign="middle".

您应该可以在 li 中嵌套 table，或者只使用 table。

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td style="font-size:40px;font-weight:bold;">Sample Text 31</td>
    <td><img src="https://upload.wikimedia.org/wikipedia/commons/2/21/Speaker_Icon.svg" width="20" height="20"></td>
  </tr>
</table>

如何控制图像高度以匹配 html 电子邮件中的相邻文本

How to control image height to match adjoining text in html email

html

css

html-email