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

#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. day05_01 鸡汤+内容回顾

    推荐电影: 1.被解救的姜戈 2.华尔街之狼 3.阿甘正传 4.辛德勒的名单 5.肖申克的救赎 6.上帝之城 7.焦土之城 8.绝美之城 打印多行 msg = "hello 1 hello ...

  2. 面向对象——property

    1.property特性 property是一种特殊的属性,访问它时会执行一段功能(函数)然后返回值 将一个类的函数定义成特性以后,对象再去使用的时候obj.name,根本无法察觉到name是执行了一 ...

  3. xml报错“cvc-complex-type.2.4.c: The matching wildcard is strict, but no declaration can be found for element”

    配置使用dubbo时,xml报错“cvc-complex-type.2.4.c: The matching wildcard is strict, but no declaration can be ...

  4. 2017"百度之星"程序设计大赛 - 初赛(B)

    Chess  Accepts: 1805  Submissions: 5738  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 32768 ...

  5. 静态方法,Arrays类,二维数组

    一.静态方法 静态方法属于类的,可以直接使用类名.方法名()调用. 静态方法的声明 访问修饰符 static 类型 方法名(参数列表) { //方法体 } 方法的作用:一个程序分解成几个方法,有利于快 ...

  6. HDU——2602Bone Collector(01背包)

    Bone Collector Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  7. 刷题总结——doing homework again(hdu1789)

    题目: Problem Description Ignatius has just come back school from the 30th ACM/ICPC. Now he has a lot ...

  8. 刷题总结——树的同构(bzoj4337 树上hash)

    Description 树是一种很常见的数据结构. 我们把N个点,N-1条边的连通无向图称为树. 若将某个点作为根,从根开始遍历,则其它的点都有一个前驱,这个树就成为有根树. 对于两个树T1和T2,如 ...

  9. Java面试之JVM原理总结

    1.什么是JVM? 答:JVM是Java Virual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,他是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟计算机功能来实现 ...

  10. 卡牌游戏(bzoj 3191)

    Description   N个人坐成一圈玩游戏.一开始我们把所有玩家按顺时针从1到N编号.首先第一回合是玩家1作为庄家.每个回合庄家都会随机(即按相等的概率)从卡牌堆里选择一张卡片,假设卡片上的数字 ...