图片和文字在 <td> 内并排显示,效果不佳
Image & text side by side inside <td> outlook it's not working fine
在 Outlook 中,图像和文本未正确对齐。文本正在下降,但在浏览器视图中显示完全正常。
我尝试添加 valign & vertical-algin middle 但对我不起作用可能是我需要添加一些条件编码因为我有最新版本的 outlook
对齐在浏览器中工作正常但在 outlook 中不工作
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td bgcolor="#4f2d7f" class="stack-column-center" dir="ltr" style="padding: 12px; font-size: 14px; font-family: Arial; color: rgb(255, 255, 255); font-weight: bold; line-height: 1.2em; text-align: center;" width="298">
<img height="45" src="https://app.clickdimensions.com/blob/usgtcom-a4hdv/files/internet_white_teal.png?1563370289884" style="margin: 5px;vertical-align: middle;width:25px;height: 40px;" width="25" />
<span style="vertical-align: middle;">Monday, July 15, 2019 | 2:00 pm ET</span>
</td>
<td bgcolor="#4f2d7f" class="stack-column-center" dir="ltr" style="padding:12px; font-size: 14px; font-family: Arial; color: rgb(255, 255, 255); font-weight: bold; line-height: 1.2em; text-align: center;">
<img height="45" src="https://app.clickdimensions.com/blob/usgtcom-a4hdv/files/internet_white_teal.png?1563370289884" style="margin: 5px;width:25px;vertical-align: middle;height: 40px;" width="25" />
<span style="vertical-align: middle;">1.5 CPE credits</span>
</td>
</tr>
</tbody>
</table>
我建议您在其中创建另一个 table。给它一行 2 个单元格,并将这些单元格的内容对齐到中间。或者尝试将 display:inline-block 添加到图像和 span
在 Outlook 中,图像和文本未正确对齐。文本正在下降,但在浏览器视图中显示完全正常。
我尝试添加 valign & vertical-algin middle 但对我不起作用可能是我需要添加一些条件编码因为我有最新版本的 outlook
对齐在浏览器中工作正常但在 outlook 中不工作
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td bgcolor="#4f2d7f" class="stack-column-center" dir="ltr" style="padding: 12px; font-size: 14px; font-family: Arial; color: rgb(255, 255, 255); font-weight: bold; line-height: 1.2em; text-align: center;" width="298">
<img height="45" src="https://app.clickdimensions.com/blob/usgtcom-a4hdv/files/internet_white_teal.png?1563370289884" style="margin: 5px;vertical-align: middle;width:25px;height: 40px;" width="25" />
<span style="vertical-align: middle;">Monday, July 15, 2019 | 2:00 pm ET</span>
</td>
<td bgcolor="#4f2d7f" class="stack-column-center" dir="ltr" style="padding:12px; font-size: 14px; font-family: Arial; color: rgb(255, 255, 255); font-weight: bold; line-height: 1.2em; text-align: center;">
<img height="45" src="https://app.clickdimensions.com/blob/usgtcom-a4hdv/files/internet_white_teal.png?1563370289884" style="margin: 5px;width:25px;vertical-align: middle;height: 40px;" width="25" />
<span style="vertical-align: middle;">1.5 CPE credits</span>
</td>
</tr>
</tbody>
</table>
我建议您在其中创建另一个 table。给它一行 2 个单元格,并将这些单元格的内容对齐到中间。或者尝试将 display:inline-block 添加到图像和 span