没有Flexbox的电子邮件HTML通讯中的图像垂直对齐

Question

我正在工作的HTML电子邮件通讯。我已经通过各种表和内联CSS将布局分割开来。如果您访问https://heathology.github.io/email-newsletter/，您可以看到我的时事通讯的现场演示。

有一张图片写着“恐怖之夜”，它是两列中的第一列.我想把图像垂直地放在第2列的内容旁边。我不能让图像向下跳动。

下面，您将看到我的css代码：

/* two columns */
    .two-columns.last {
        padding: 15px 0;
    }
    .two-columns .padding {
        padding: 20px;
    }
    .two-columns .content {
        font-size: 15px;
        line-height: 20px;
        text-align: left;
    }
    .button {
        background-color: #ffffff;
        color: #171a1b;
        text-decoration: none;
        padding: 12px 20px;
        border-radius: 5px;
        font-weight: bold;
    }
    .button-dark {
        background-color: #171a1b;
        color: #ffffff;
        text-decoration: none;
        padding: 12px 20px;
        border-radius: 5px;
        font-weight: bold;
    }

在下面的HTML中，您可以看到我是如何通过表安排它的：

<!-- TWO COLUMN SECTION -->
            <tr>
                <td style="background-color: #26292b; color: #ffffff;">
                    <table width="100%">

                        <tr>
                            <td class="two-columns last">

                                <table class="column">
                                    <tr>
                                        <td class="padding">
                                            
                                            <table class="content">
                                                <tr>
                                                    <td>
                                                        <a href="LINK"><img src="img/2022-Fright-Night.png" alt="" width="260" style="max-width:260px;"></a>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>

                                <table class="column">
                                    <tr>
                                        <td class="padding">
                                
                                            <table class="content">
                                                <tr>
                                                    <td>
                                                        <p style="font-weight: bold; font-size: 18px;">Fright Night</p>
                                                        <p style="padding-bottom: 16px;">Do you like chills and fright? Then, join St. Auggies' youth at Frontier City's Fright Night on Friday, October 28 from
                                                        6:00pm-10:00pm. Tickets are $42.99/per person. Open to youth and adults 12 & up.</p>
                                                            <a href="LINK" class="button">Sign Up</a>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>

                            </td>
                        </tr>

                    </table>
                </td>
            </tr>

有什么建议吗？如果需要，您可以看到完整的代码这里。

Answer 1

更改.两列.column的css样式

    width: 100%;
    max-width: 300px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;