css3 position fixed居中的问题
通常,我们要让某元素居中,会这样做:
#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居中的问题的更多相关文章
- position fixed 居中
1.水平居中.footer { height: 10%; text-align: center; position: relative; left: 50%; transform: translate ...
- position:fixed 居中问题
设置Css属性position:fixed后如何使这个盒子居中呢?其实也很简单: 就是需要设置给这个div盒子设置属性: left:0; right:0; margin:0 auto; ******* ...
- 关于position:fixed;的居中问题
通常情况下,我们通过操作margin来控制元素居中,代码如下: #name{ maigin:0px auto; } 但当我们把position设置为fixed时,例如: #id{ position:f ...
- css中position:fixed实现div居中
上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; h ...
- position:fixed;如何居中
div{ position:fixed; margin:auto; left:; right:; top:; bottom:; width:100px; height:100px; } 如果只需要左右 ...
- position:fixed div如何居中
div{position:fixed;margin:auto;left:0; right:0; top:0; bottom:0;width:200px; height:150px;}
- day2-设置position:fixed/absolute无法使用margin:auto调整居中
问题描述:父元素给定宽度,子元素给定宽度,设置子元素position为absolute/fixed后,无法使用margin:auto使子元素在父元素中水平居中 html代码如下: <div cl ...
- 使用属性position:fixed的时候如何才能让div居中
css: .aa{ position: fixed; top: 200px; left: 0px; right: 0px; width: 200px; height: 200px; margin-le ...
- 元素设置position:fixed属性后IE下宽度无法100%延伸
元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...
随机推荐
- shutil——高级的 文件、文件夹、压缩包 处理模块
高级的 文件.文件夹.压缩包 处理模块 shutil.copyfileobj(fsrc, fdst[, length])复制文件内容(不包含元数据)从类文件对象src到类文件对dst.可选参数leng ...
- [转]如何把嵌套的python list转成一个一维的python list?
import itertools a = [[1,2,3],[4,5,6], [7], [8,9]] out = list(itertools.chain.from_iterable(a))
- 使用PHPExcel单元格样式添加不上的原因
按照文档上的样式设置方法设置样式,一直不成功.后来发现是得要在创建了sheet,并选择某一个sheet作为活动sheet后再设置才可以.这里记录一下.
- Map容器——HashMap及常用API,及put,get方法解析,哈希码的产生和使用
Map接口 ① 映射(map)是一个存储键/值对的对象.给定一个键,可以查询到它的值,键和值都是对象; ② 键必须是唯一的,值可以重复; ③ 有些映射可以接收null键和null值,而有的 ...
- npm link & run npm script
npm link & run npm script https://blog.csdn.net/juhaotian/article/details/78672390 npm link命令可以将 ...
- 北京集训TEST12——PA( Mortal Kombat)
题目: Description 有一天,有N个外星人企图入侵地球.地球派出全球战斗力最强的M个人代表人类对抗外星人.根据外星的战斗规则,每个外星人应该分别与一名地球人对战(不同的外星人要与不同的地球人 ...
- Process类,Thread类,Pool类,gevent类,ProcessPoolExecutor,ThreadPoolExecutor的用法比较
一 Process类 multiprocessing模块下的一个类 创建子进程. 有两种方法 方法一 from multiprocessing import Process import os def ...
- 关于postman使用上发现的一点问题
之前后台用的java,一直用的postman测试接口数据,之前不管是get.post.delete.put请求都是在param传递的数据,java下面是没问题可以测试的.但是今天自己写Node发现po ...
- codeforces 446C DZY Loves Fibonacci Numbers 数论+线段树成段更新
DZY Loves Fibonacci Numbers Time Limit:4000MS Memory Limit:262144KB 64bit IO Format:%I64d &a ...
- hdu 1695 容斥原理或莫比乌斯反演
GCD Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...