步骤
假设在一行中设置了四个图片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;
}
}
现在,桌面浏览器以及手机浏览器上的显示都比较美观了。