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

#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. day03_11 if语句实现猜年龄01

    老男孩猜年龄游戏 age_of_princal = 56 guess_age = int( input(">>:") ) #以下为伪代码 ''' if guess_ag ...

  2. 2017ICPC北京 J:Pangu and Stones

    #1636 : Pangu and Stones 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 In Chinese mythology, Pangu is the fi ...

  3. 使用jackson解析JSON数据

    本文介绍使用jackson来对json数据进行解析操作 首先,需要去官网下载jackson,本文使用的是(jackson-all-1.9.11.jar) 主要通过ObjectMapper对json进行 ...

  4. 设计模式(二 & 三)工厂模式:3-抽象工厂模式

    什么是抽象工厂? 抽象工厂模式,引入了“产品族”的概念. 何为产品族?还是以 设计模式(二)工厂模式:2-工厂方法模式 提到的 Operation 为例. 之前讨论的都是局限于 Operation 这 ...

  5. 【bzoj3170】[Tjoi 2013]松鼠聚会 旋转坐标系

    题目描述 有N个小松鼠,它们的家用一个点x,y表示,两个点的距离定义为:点(x,y)和它周围的8个点即上下左右四个点和对角的四个点,距离为1.现在N个松鼠要走到一个松鼠家去,求走过的最短距离. 输入 ...

  6. 【Luogu】P2495消耗战(虚树DP)

    题目链接 我虚树没很理解啊qwq 就是我们有比较少的询问点,然后我们把不需要考虑的点搞一搞扔掉,然后每次询问给那些询问点单独建一颗树,然后乱搞. ……好吧看来是完全没理解…… 链接大法qwq #inc ...

  7. BZOJ-1036 [ZJOI2008]树的统计

    树链剖分模版题. #include <cstdlib> #include <cstdio> #include <cstring> #include <algo ...

  8. [luoguP2763] 试题库问题(最大流)

    传送门 每个类别和它所有的试题连一条权值为1的边. 增加一个超级源点s,s和每个类别连一条权值为选当前类别数量的边. 增加一个超级汇点t,每个试题和t连一条权值为1的边. 求最大流即可. ——代码 # ...

  9. [luoguP3231] [HNOI2013]消毒(最小点覆盖 + 状压)

    传送门 考虑贪心,控制某一维为1,另两位最大是最优的,也就是一次选一个厚度为1的面 那么对于每个点,可以有3种面是可以选到它的 然后gg 考虑二维的状态,一个平面,有些点,一次选一行或一列最优 那么每 ...

  10. NOIP2017赛前模拟(3):总结

    题目: 1.购买板凳(100) 大意:区间修改最后查询全局最大值; 2.新排序(40分暴力) 大意:给一串长度小于100000的数列···每次操作找出序列中严格小于其左边的数字或者严格大于其右边的数字 ...