Wordpress表格中的垂直居中对齐答案

【问题标题】：Vertical Align Middle in Wordpress tableWordpress表格中的垂直居中对齐
【发布时间】：2017-12-20 08:09:30
【问题描述】：

我正在开发一个带有插件的 Wordpress.org 网站，该插件允许我更改页脚区域的来源，因为我的主题不支持页脚。我正在尝试创建一个带有徽标和 2 个 PHP 元素的表格，这些元素显示我们的赞助商和合作伙伴的滚动徽标。

简而言之，表格应该是这样的：

---------------------------------------------
|           |               |               |
|           | Our Partners  |(PARTNERS PHP) |
|           |               |               |
|   (LOGO)  |---------------|---------------|
|           |               |               |
|           | Our Sponsors  |(SPONSORS PHP) |
|           |               |               |
---------------------------------------------

但是，我无法让文字显示“我们的合作伙伴”和“我们的赞助商垂直对齐”。我怀疑问题可能出在 Wordpress 的样式上。

这是我正在使用的代码：

<style>
    #footer_table_layout {
        width: 100%;
    }
    #shoutouts {
        width: 100%;
    }
    #label {
        vertical-align: middle !important;
    }
    #logo {
      vertical-align: middle;
      width: 20%;
    }
</style>

<table id="footer_table_layout">

    <tr id="shoutouts">
        <td rowspan=2 id="logo"><img src="/wp-content/uploads/2017/07/logo5.png" /></td>
        <td><h3 id="label">Our Partners</h3></td>
        <td><?php kw_sc_logo_carousel('partners'); ?></td>
    </tr>
    <tr id="shoutouts">
        <td><h3 id="label">Our Sponsors</h3></td>
        <td><?php kw_sc_logo_carousel('sponsors'); ?></td>
    </tr>
</table>

【问题讨论】：

This 文章可能对您有所帮助
@flosommerfeld 确实如此 - 您能否将其发布为答案以便我接受？

标签： html css wordpress html-table

【解决方案1】：

将垂直对齐属性应用于表格单元格，即

#shoutouts{
     vertical-align: middle;
}

这应该指示它垂直对齐其内容

【讨论】：

【解决方案2】：

使用 Flexbox，您可以不用担心。您可以使用 align-items、align-self 和 justify-content 属性轻松对齐任何内容（垂直或水平）。

This arcticle 将帮助您使用 Flexbox 进行垂直居中。

【讨论】：