通常,我们要让某元素居中,会这样做:

#element{
margin:0 auto;
}

假设还想让此元素位置固定呢?一般我们会加入position:fixed,例如以下:

#element{
position:fixed;
margin:0 auto;
}

可是这样做的结果就是。元素不居中了。这说明fixed使对象脱离了正常文档流

解决方式:

#element{
position:fixed;
margin:0 auto;
left:0;
right:0;
}

可是在IE7下面的版本号中无法工作,要将其更改为:

#element{
position:fixed;
margin:0 auto;
left:auto;
right:auto;
}

最后我们能够这样:

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {
strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}

演示样例代码:http://jsfiddle.net/4Ly4B/33/

假设对你有帮助,欢迎增加:QQ群:124116463。一起讨论前端技术吧!

css3 position fixed居中的问题的更多相关文章

  1. position fixed 居中

    1.水平居中.footer { height: 10%; text-align: center; position: relative; left: 50%; transform: translate ...

  2. position:fixed 居中问题

    设置Css属性position:fixed后如何使这个盒子居中呢?其实也很简单: 就是需要设置给这个div盒子设置属性: left:0; right:0; margin:0 auto; ******* ...

  3. 关于position:fixed;的居中问题

    通常情况下,我们通过操作margin来控制元素居中,代码如下: #name{ maigin:0px auto; } 但当我们把position设置为fixed时,例如: #id{ position:f ...

  4. css中position:fixed实现div居中

    上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; h ...

  5. position:fixed;如何居中

    div{ position:fixed; margin:auto; left:; right:; top:; bottom:; width:100px; height:100px; } 如果只需要左右 ...

  6. position:fixed div如何居中

    div{position:fixed;margin:auto;left:0; right:0; top:0; bottom:0;width:200px; height:150px;}

  7. day2-设置position:fixed/absolute无法使用margin:auto调整居中

    问题描述:父元素给定宽度,子元素给定宽度,设置子元素position为absolute/fixed后,无法使用margin:auto使子元素在父元素中水平居中 html代码如下: <div cl ...

  8. 使用属性position:fixed的时候如何才能让div居中

    css: .aa{ position: fixed; top: 200px; left: 0px; right: 0px; width: 200px; height: 200px; margin-le ...

  9. 元素设置position:fixed属性后IE下宽度无法100%延伸

    元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...

随机推荐

  1. hibernate缓存详解

    hibernate中提供了两级缓存,一级缓存是Session级别的缓存,它属于事务范围的缓存,该级缓存由hibernate管理,应用程序无需干预:二级缓存是SessionFactory级别的缓存,该级 ...

  2. best coder #35-01<组合数学 || 概率数学>

    问题描述 一个盒子里有n个黑球和m个白球.现在DZY每次随机从盒子里取走一个球,取了n+m次后,刚好取完.DZY用这种奇怪的方法生成了一个随机的01串S[1⋯(n+m)].如果DZY第i次取出的球是黑 ...

  3. UVa——400Unix ls(字典序文本处理输出iomanip)

    Unix ls Time Limit:                                                        3000MS                    ...

  4. 刷题总结——做运动(NOIP模拟)

    题目: 给定一个无向图,节点数n<=50000,m<=1000000,每条边有两个值t和c,边的长度为t*c···现在要求再t尽量小的情况下,求两节点st的最短距离 题解: 第一次做的时候 ...

  5. eval()函数的巧用

    eval的功能 将字符串str当成有效的表达式来执行.. 写函数,专门计算图形的面积 其中嵌套函数,计算圆的面积,正方形的面积和长方形的面积 调用函数area(‘圆形’,圆半径)  返回圆的面积 调用 ...

  6. django 报错 no such table: auth_user

    需要执行 python3 manage.py makemigrations python3 manage.py migrate 参考:http://arrayoverflow.com/question ...

  7. LFYZOJ 104 Counting Swaps

    题解 #include <iostream> #include <cstdio> #include <algorithm> #include <cmath&g ...

  8. 标准C程序设计七---52

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  9. 我的logging 配置

    #encoding=utf-8 import logging.config logging.config.dictConfig({ 'version': 1, 'disable_existing_lo ...

  10. hdu 1796(容斥原理+状态压缩)

    How many integers can you find Time Limit: 12000/5000 MS (Java/Others)    Memory Limit: 65536/32768 ...