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(下 ...
随机推荐
- fedora安装rails缺少js runtime和cannot load such file -- sqlite3/sqlite3_native解决办法
装完rails后创建应用程序: rails new demo 进入创建的demo文件夹 cd demo 检查安装环境 rake about 这时出现错误 Could not find a JavaSc ...
- java EE技术体系——CLF平台API开发注意事项(4)——API生命周期治理简单说明
文档说明 截止日期:20170905,作者:何红霞,联系方式:QQ1028335395.邮箱:hehongxia626@163.com 综述 有幸加入到javaEE技术体系的研究与开发,也得益于大家的 ...
- 九度oj 题目1452:搬寝室
题目描述: 搬寝室是很累的,xhd深有体会.时间追述2006年7月9号,那天xhd迫于无奈要从27号楼搬到3号楼,因为10号要封楼了.看着寝室里的n件物品,xhd开始发呆,因为n是一个小于2000的整 ...
- 二进制<4>
位运算简介及实用技巧(四):实战篇 下面分享的是我自己写的三个代码,里面有些题目也是我自己出的.这些代码都是在我的Pascal时代写的,恕不提供C语言了.代码写得并不好,我只是想告诉大家位运算在实战中 ...
- jquery validate用法总结
jquery validate是本人用过的最好用的验证组件,但其文档写的真是不敢恭维,现将一些常见用法总结如下(持续更新). 1. js触发表单验证 //触发整个表单的验证 $('form').val ...
- java面试题之数据基本类型各占几个字节
类型 位数 字节数 short 2*8 2 char 2*8 2 int 4*8 4 float 4*8 4 long 8*8 8 double 8*8 8
- SpringBoot jackson传入List引起的坑
一.jackson无法解析value为[]的json 当入参为{xxxx1:[1,2,3],xxxx2:[obj1,obj2,obj3]}时,springmvn controller接收入参写为Lon ...
- luogu P2831 愤怒的小鸟
题目描述 Kiana最近沉迷于一款神奇的游戏无法自拔. 简单来说,这款游戏是在一个平面上进行的. 有一架弹弓位于(0,0)处,每次Kiana可以用它向第一象限发射一只红色的小鸟,小鸟们的飞行轨迹均为形 ...
- commons-lang3-RandomUtils
随机工具类 RandomUtils nextBoolean() 返回一个随机boolean值 nextBytes(int count) 返回一个指定大小的随机byte数组 nextDouble() ...
- AnsiString类型定义的时候可以直接指定代码页,比如950繁体字,936日文
procedure TForm3.FormCreate(Sender: TObject); type AnsiStringForPage = type AnsiString(950);//代码页 va ...