在td中垂直对齐图像

Question

我有tr有4 td。这些td是float:left。每个td都有不同大小的图像。现在我正在尝试vertical-align中心的图像，所以它们按顺序查看。

但是当我向他们添加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

这里有一些代码可以在不使用表的情况下执行您想要的操作。我也纠正了占位符图像的宽度。内联块的宽度应该是图像宽度的总和加上额外的一点来计算默认边距，边框和填充（除非你明确地将它们清零）。

<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>

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

Answer 2

你只需要一件事就可以将vertical-align:middle;关闭到想要在中间对齐的元素。希望他们这么简单吗？

http://codepen.io/nicholasabrams/pen/wamepG