超出父元素宽度的子元素在父元素中水平居中方法
文 / @WordPress主题
对于宽度小于父元素宽度的行内子元素,要实现水平居中,可以给父元素使用:
div { text-align: center; }
小于父元素宽度的情况,如果已知子元素宽度,可以使用相对定位和负外边距方法:
div img { position: relative; left: 50%; margin-left: -130px; //元素宽度除以2 }
小于父元素宽度的情况,如果子元素宽度未知,可以将子元素设置为块级元素,再设置左右外边距为auto:
div img { display: block; margin: 0 auto; }
如果子元素宽度超出父元素宽度,但子元素宽度是固定的,则可以使用相对定位和负外边距来实现:
div img { position: relative; left: 50%; margin-left: -540px; //元素宽度除以2 }
如果子元素宽度超出父元素宽度,且子元素宽度是自动的,则可以使用相对定位和transform属性来实现:
div img { position: relative; left: 50%; transform: translateX(-50%); }

相关文章
-
搭建一个WordPress网站需要多少成本 2023-11-06 00:09:51
-
Symlink介绍(附:如何使用Symlink进行WordPress开发) 2023-11-05 23:38:32
-
让WordPress实现数据库同步的插件:HyperDB 2023-10-24 23:40:49
-
allegro电商平台值得做吗(附:2023年Allegro注册流程指南) 2023-10-08 21:53:39
-
印度跨境电商平台有哪些(附:印度跨境电商做什么产品好) 2023-10-08 21:34:23
-
跨境电商必看的几大海外二手电商平台 2023-10-08 18:04:42
-
WordPress同城互联网产品解决方案:UBASE 2023-10-03 16:40:39
-
WordPress网站的安全插件:wordfence 2023-09-14 09:25:18
-
WordPress 6.3 支持在手动更新插件和主题失败后回滚旧版本 2023-08-28 16:58:45
-
WordPress 6.3版本(2023年8月)性能提升了哪些? 2023-08-28 16:56:02