WordPress——SiteOrigin设置一行中的Widgets竖直居中显示

步骤

假设在一行中设置了四个图片Widget，那么默认情况下这些图片的顶部对齐。这样，当图片大小不一致时，显示效果非常难看。我们想让所有的图片中间对齐。

要实现这个效果，需要同时执行下面两个操作：

• 设置行的Layout中Cell Vertical Alignment项为center，如下图所示：

• 在Attributes的CSS Styles中添加如下代码

display: -ms-flexbox
display: -webkit-flex
display: flex
-ms-flex-align: center
-webkit-align-items: center
-webkit-box-align: center
align-items: center

经过这两步操作后即可实现我们理想的显示效果。

But…
在手机上浏览的时候，发现一行四个还是挤在一行，手机屏幕这么小，有多难看可想而知。我们希望在手机上是一个图片一个图片的显示。
对上面的第二步进行修改。首先把第二步的操作先抹去，然后在Attributes的Row Class中输入vertical-center，接着在外观> Custom CSS 中输入：

@media (min-width: 680px) {

.vertical-center {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}

}

现在，桌面浏览器以及手机浏览器上的显示都比较美观了。

参考

[1] https://siteorigin.com/thread/vertical-allign-in-a-row/