在Wordpress表格中垂直对齐中间

我正在使用一个插件让我可以更改页脚区域的源代码，因为我的主题不支持页脚，所以我在Wordpress.org网站上工作。我正在尝试创建一个带有徽标和2个PHP元素的表格，以显示我们的赞助商和合作伙伴的滚动徽标。在Wordpress表格中垂直对齐中间

总之，这个表应该是这样的：

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

来源

2017-07-15 Theo C

[This]（https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/）文章可能会帮助你 – flosommerfeld

@flosommerfeld它做到了 - 你可以请张贴作为答案，所以我可以接受吗？ –

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

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

来源

2017-07-15 14:46:03 flosommerfeld

应用垂直对齐属性表单元格，而不是即

#shoutouts{ 
    vertical-align: middle; 
}

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

来源

2017-07-15 13:36:57

在Wordpress表格中垂直对齐中间

回答

相关问题