html - 垂直对齐 td 中的图像

Question

我有一个 tr，有 4 个 td。这些td是float:left。每个 td 都有不同大小的图像。现在我正在尝试将图像垂直对齐在中心，以便它们按顺序排列。

但是当我向它们添加 vertical-align: middle 时，它不起作用。我什至将 min-height 添加到 td

这是我的 jsFiddle 和代码:

    <table class="footer deviceWidth" width="100%" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse;">
        <tr>
            <td style="font-size: 13px; color: #fff; font-weight: normal; text-align: left; line-height: 24px; vertical-align: top; padding:15px 0;">
                <h5 style="font-size: 20px;font-weight: normal;margin: 0;padding: 0;">The Company you'll Keep</h5>
                <table align="left" width="100%" class="companies" style="border-collapse: collapse;">
                    <tr style="margin-bottom: 20px;display: inline-block;margin: 10px 0 0;">
                        <td style="min-height: 50px; float: left;width: 17%;margin-right: 2.5%;"><img src="http://placehold.it/490x310" width="346" height="50" alt="AA" style="height: auto;width: 100%;"></td>
                        <td style="min-height: 50px; float: left;width: 17%;margin-right: 2.5%;"><img src="http://placehold.it/200x50" width="456" height="50" alt="images" style="height: auto;width: 100%;"></td>
                        <td style="min-height: 50px; float: left;width: 17%;margin-right: 2.5%;"><img src="http://placehold.it/900x100" width="391" height="50" alt="images" style="height: auto;width: 100%;"></td>
                        <td style="min-height: 50px; float: left;width: 17%;margin-right: 2.5%;"><img src="http://placehold.it/100x100" width="276" height="40" alt="images" style="height: auto;width: 100%;"></td>
                    </tr>
            </td>
        </tr>
    </table>

我使用内联 CSS，因为它是电子邮件模板。

编辑:这就是我正在寻找的内容:

Answer 1

这里有一些代码可以在不使用表格的情况下完成您想要的操作。我还更正了占位符图像宽度。内联 block 的宽度应该是图像宽度的总和加上一点额外的宽度以考虑默认边距、边框和填充(除非您明确将它们归零)。

<div style="display:inline-block;width:1800px;">
<img src="http://placehold.it/490x310" width="490" height="310" alt="AA" style="vertical-align:middle;"/>
<img src="http://placehold.it/200x50" width="200" height="50" alt="images" style="vertical-align:middle;"/>
<img src="http://placehold.it/900x100" width="900" height="100" alt="images" style="vertical-align:middle;"/>
<img src="http://placehold.it/100x100" width="100" height="100" alt="images" style="vertical-align:middle;"/>
</div>

如果您确实想使用表格，请从每个 td 中删除 float:left 并添加 vertical-align:middle;.