超出父元素宽度的子元素在父元素中水平居中方法
文 / @UTHEME
对于宽度小于父元素宽度的行内子元素,要实现水平居中,可以给父元素使用:
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插件:All in One WP Security & Firewall 怎么样(附:AIOWPS拦截垃圾评论设置教程) 2023-01-26 21:51:51
-
在 PHP 中如何通过一行代码就交换两个变量的值 2023-01-26 00:18:31
-
WordPress主题:Pin Premium (WordPress仿Pinterest样式瀑布流主题) 2023-01-25 23:36:43
-
免费WordPress主题:Maupassant(WordPress中文博客主题) 2023-01-25 23:31:29
-
WordPress响应式图片(Responsive Image)功能关闭:取消WordPress图片宽带和高度参数 2023-01-24 10:49:32
-
wordpress报错:修复MySQL 1064错误问题 错误原因和解决方法 2023-01-24 10:42:04
-
WordPress 实现静态化搜索结果页面的方法 2023-01-24 00:41:44
-
WP Rocket – 强大的WordPress缓存加速优化插件(附:WP Rocket插件设置过程与七折优惠码) 2023-01-24 00:41:44
-
get_permalink、get_the_permalink和the_permalink有啥区别? 2023-01-24 00:41:08
-
为什么选用WordPress搭建独立站? 2023-01-23 20:25:21