垂直对齐 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>

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

Answer 2

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

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

垂直对齐 td 中的图像

Vertical align images in td

html

css

html-email