博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
绝对定位后,position:absolute;不能使用margin: 0 auto;实现居中;
阅读量:5273 次
发布时间:2019-06-14

本文共 420 字,大约阅读时间需要 1 分钟。

声明: web小白的笔记,欢迎大神指点!联系QQ:1522025433.

 

我们都知道margin: 0 auto;可也实现块状元素的水平居中;但是对于绝对顶为的元素就会失效;

请看实例:

绝对定位后margin: 0 auto;居中失效的解决方法

浏览器效果图:

我们可以看出在正常情况下: margin: 0 auto; 实现居中真是棒棒的!

我们把css样式修改为:

浏览器效果:

子元素(蓝色盒子)的居中效果已失效!

绝对定位以后margin: 0 auto;实现居中失效的解决方法:

为了使子元素(蓝色盒子)在绝对定位下实现居中,我们可以利用定位和margin-left取相应的负值,实现居中;

具体代码如下:

 

 

 浏览器效果图:

 

 是不是达到我们想要的结果了(认真看代码中的注释)。

 

转载于:https://www.cnblogs.com/taohuaya/p/7662635.html

你可能感兴趣的文章
[development][dpdk][hugepage] 大页内存的挂载
查看>>
【二代示波器教程】第15章 FreeRTOS操作系统版本二代示波器实现
查看>>
PHP学习笔记二十三【This】
查看>>
STM32学习之大纲
查看>>
P2010回文日期
查看>>
Python开发的10个小贴士
查看>>
bzoj:3616: War
查看>>
qrcode length overflow (1632>1056)--qrcode.js使用过程中二维码长度溢出解决办法
查看>>
我踩过的听过的那些坑
查看>>
CSS 制作3D旋转视频
查看>>
JQ全选反选
查看>>
sql语句中in和exists的区别
查看>>
python-处理文件
查看>>
eclipse6.5 自动注册代码
查看>>
spring配置文件比较全的约束
查看>>
Sqlit--学习教程(附加数据库)
查看>>
9月2日笔记
查看>>
文件拷贝 上传下载 输入流输出流个人小结,仅供自己使用
查看>>
OptimalSolution(2)--二叉树问题(2)BST、BBT、BSBT
查看>>
342.4的幂
查看>>