Question

我正在使用插件工作的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>

Answer 1

将vertical-align属性应用于表格单元格，即

#shoutouts{
     vertical-align: middle;
}

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

Answer 2

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

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

在Wordpress表中垂直对齐中间

2 个答案: