HTML 电子邮件的图像左对齐问题答案

【问题标题】：Trouble Left Aligning Images for HTML EmailHTML 电子邮件的图像左对齐问题
【发布时间】：2020-02-23 04:28:04
【问题描述】：

不熟悉编码和学习如何创建 HTML 电子邮件。我随机选择了一封电子邮件并尝试复制它。

我正在尝试将 Google 图片与 Apple Play 商店图片对齐，并将社交媒体图标全部放在左侧。

我搜索过 W3、Google 和 Stack Overflow。我试图添加填充。

感谢您的帮助。

                         <tr>
                            <td>
                                <img src="/img/applestorelogo.png" width="auto" height="24" style=" display: inline-block;" alt="applestorelogo"/>
                            </td>
                            <td>
                                <img src="/img/googlestore.png" width="auto" height="24" alt="googlestore"/>
                            </td>
                            <td><img src="/img/fb.png" width="auto" height="24"  alt="facebook"/>
                            </td>
                            <td><img src="/img/IG.png" width="auto" height="24" alt="instagram"/>
                            </td>
                            <td><img src="/img/twitter.png" width="auto" height="24" alt="twitter"/>
                            </td>
                        </tr>

下面是image

【问题讨论】：

标签： html css html-email

【解决方案1】：

我认为你应该只使用三个<td>。

以下是您的方案的一个想法。您可能需要根据您的布局更改宽度：

<table border="1" style="width:50%">
<tr>
    <td style="text-align: center; width: 5%;">
        <img src="/img/applestorelogo.png" width="auto" height="24" alt="applestorelogo"/>
    </td>
    <td style="text-align: center;width: 5%;">
        <img src="/img/googlestore.png" width="auto" height="24" alt="googlestore"/>
    </td>
    <td style="text-align: right;">
        <img src="/img/fb.png" width="auto" height="24"  alt="facebook"/>  
        <img src="/img/IG.png" width="auto" height="24" alt="instagram"/>  
        <img src="/img/twitter.png" width="auto" height="24" alt="twitter"/>
    </td>
</tr>
</table>

【讨论】：

谢谢库拉姆。我能够弄清楚我无法让这两个图像彼此对齐的原因。我需要一个 display: inline-block 在原始表上。现在我需要将社交媒体图标放在一侧，而将苹果/谷歌游戏商店放在另一侧。我想我需要创建两个单独的表。
您也许可以通过 inline-block 解决。但我建议更频繁地使用
。使用
，您的布局将加载得更快。无论如何，尝试减少以实现对齐目的，就像我给出的示例一样，尝试使用它。

【解决方案2】：

    <tr style="display: inline-block;">
            <td>
                <img style="border: 2px red solid" src="/img/applestorelogo.png" alt="applestorelogo"/>
            </td>
            <td>
             <img style="border: 2px red solid" src="/img/googlestore.png" alt="googlestore"/>
            </td>
            <td>
                <img style="border: 2px red solid" src="/img/fb.png" alt="facebook"/>
            </td>
            <td>
                <img style="border: 2px red solid" src="/img/IG.png" alt="instagram"/>
            </td>
            <td>
                <img style="border: 2px red solid" src="/img/twitter.png" alt="twitter"/>
            </td>
        </tr>

无视边界。我用它来解决问题。

【讨论】：