码迷,mamicode.com
首页 > 其他好文 > 详细

关于position:fixed;的居中问题

时间:2017-07-21 13:20:27      阅读:501      评论:0      收藏:0      [点我收藏+]

标签:top   code   情况   osi   color   通过   操作   应用   方法   

通常情况下,我们通过操作margin来控制元素居中,代码如下:

1 #name{
2     maigin:0px auto;
3 }

但当我们把position设置为fixed时,例如:

1 #id{
2     position:fixed;
3     margin:0px auto;
4 }

以上代码中的margin:0px auto;会出现失效问题,盒子并未居中。这是因为fixed会导致盒子脱离正常文档流。
解决方法非常简单,只要应用如下代码即可:

1 #name{
2     position:fixed;
3     margin:0px auto;
4     right:0px;
5     left:0px;
6 }

若希望上下也可以居中,可采用如下代码:

1 #name{
2     position:fixed;
3     margin:auto;
4     left:0;
5     right:0;
6     top:0;
7     bottom:0;
8 }

 

关于position:fixed;的居中问题

标签:top   code   情况   osi   color   通过   操作   应用   方法   

原文地址:http://www.cnblogs.com/zywaf/p/7217102.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!