Phil S. 在群里问在他的gcfirst.org网站的首页,页首的房屋图片在手机里没有居中如何解决?
他还提供了下面这张图,右图是他要的图片居中效果。


我尝试后,先后给他几个建议,包括
.site-inner {
padding: 0;
}
.page.full-width-content .entry-content .alignfull,
.single.full-width-content .entry-content .alignfull {
max-width: 100%; // change this to max-width: none;
}
.wp-block-image.alignfull {
margin-left: 0;
margin-right: 0;
}
figure.wp-block-image.alignfull.aligncenter {
margin-left: 0;
margin-right:0;
}
Phil尝试后都说不行,问题似乎有点棘手。
我手里正好有个项目要将一个主题改为支持Gutenberg,恰好出现了类似图片不居中的情况,在我尝试之后发现Gutenberg的 .alignwide .alignfull的 width 和 max-width 需要特别小心处理。
最后成功解决问题的是这行css,
.page.full-width-content .entry-content .alignfull,
.single.full-width-content .entry-content .alignfull {
max-width: 100vw;
}
改之前是 max-width: 100%;
Phil S.确认了这个方案。
幸好自己手里有个项目可以反复尝试才得以最终解决。