• Skip to main content
  • Skip to footer

深圳捌戒网站设计工作室

深圳网站设计与开发 | VPS主机搭建 | SEO服务

  • 首页
  • Portfolio 作品
  • Service 服务
    • VPS主机
    • SSL证书
  • 资源
    • WordPress
    • Javascript
    • Woo
    • SEO
  • Demo
    • Owl
    • Slider
    • Popup
    • CSS Nano
    • CSS Micro
    • Berlin
  • 招聘
  • 联系方式

8J / 06/22/2019

Gutenberg图片居中

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

gcfirst
图片未能居中
gcfirst
图片居中

我尝试后,先后给他几个建议,包括

.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.确认了这个方案。

幸好自己手里有个项目可以反复尝试才得以最终解决。

推荐阅读:

  • 防御性CSS
  • 折叠屏CSS技术
  • 七个不常见的 CSS 特性

Filed Under: Coding, WordPress Tagged With: CSS, Genesis, Gutenberg

Simple Social Icons

  • Twitter
  • WeChat
  • Weibo

专业网站建设

——成就不一样的你

Footer

捌戒网站设计 

中国 广东 深圳 

网址:www.wp8j.com
微信: CTGDwaytogo

联系我们

安全高效VPS主机让您高枕无忧

美国Linux运维专家安德鲁伊先生亲自指导

  • 闪电般的速度
  • 坚如磐石
  • A+级别的SSL证书

“捌戒”的由来

多年前,我的一位美国上司对比中美两国时说道 “We have more order in US.”,我至今对此仍记忆犹新。
中国社会确实缺少了些秩序。
“捌戒”这个名字,是期望我们每个人都更好地约束自己的行为。这样,也许以后再见那个老外我就可以要他别多BB。

好了,那么佛家所说“捌戒”就是:

不杀生,不偷盗,不邪淫;
不妄语,不饮酒,不眠坐高广华丽床座;
不涂饰香及不习歌舞伎乐,不食非时食。
--《法苑珠林》

望大家切记!望大家律己!

版权 ©2021 · 捌戒设计 - 版权所有 · 网站技术支持 WP8J.com