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

#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. Leetcode 440.字典序第k小的数字

    字典序第k小的数字 给定整数 n 和 k,找到 1 到 n 中字典序第 k 小的数字. 注意:1 ≤ k ≤ n ≤ 109. 示例 : 输入: n: 13 k: 2 输出: 10 解释: 字典序的排 ...

  2. javascript基础 方法

    两者的区别:定时器隔一段时间执行一次,延迟器只执行一次 在html中直接调用此方法会返回null   

  3. c++中vector容器的功能及应用。

    vector基本操作:  1.头文件 #include<vector>. 注:一定要加上using namespace std;  2.vector对象的创建: vector<int ...

  4. iOS学习笔记35-社交分享

    一.社交分享 现在很多应用都内置“社交分享”功能,可以将看到的新闻.博客.广告等内容分享到微博.微信.QQ.人人网等,其实从iOS6.0开始苹果官方就内置了Social.framework专门来实现社 ...

  5. 【bzoj2111】[ZJOI2010]Perm 排列计数 dp+Lucas定理

    题目描述 称一个1,2,...,N的排列P1,P2...,Pn是Mogic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,...N的排列中有多少是Mogic的,答案可能很 ...

  6. linux工作笔记

    1. Linux基础 1.1. Unix 1965年,AT&T贝尔电话实验室.通用电气公司.麻省理工学院MAC课题组一起联合开发一个称为Multics的新操作系统.该项目目的是让大型主机可以同 ...

  7. [LOJ#113]最大异或和

    [LOJ#113]最大异或和 试题描述 这是一道模板题. 给由 n 个数组成的一个可重集 S,求一个集合 T⊆S,使 T1 xor T2 xor … xor T|T| 最大 输入 第一行一个数 n.第 ...

  8. jenkins使用xvfb插件构建虚拟化显示屏自动化测试

    1.linux服务器安装xvfb,并启动 参考我的博客:http://www.cnblogs.com/lincj/p/5468505.html 或者网上搜索一下进行安装 2.jenkins安装xvfb ...

  9. [暑假集训--数位dp]UESTC250 windy数

    windy定义了一种windy数. 不含前导零且相邻两个数字之差至少为22 的正整数被称为windy数. windy想知道,在AA 和BB 之间,包括AA 和BB ,总共有多少个windy数? Inp ...

  10. HDU 2594 kmp算法变形

    Simpsons’ Hidden Talents Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java ...