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(下 ...
随机推荐
- day03_03 第一个Python程序
Python的安装 之前安装了python2.7.11,接下来的课程因为是python3的,需要再安装一个python3版本...... 1.进入python.org进行选择安装 2.或者选择课件里的 ...
- 常见python快捷键
http://www.cnblogs.com/toutou/p/4778818.html Ctrl+/注释(取消注释)选择的行 Shift + Enter开始新行 Ctrl + Enter智能换行 T ...
- python列出指定目录下的所有目录和文件
import os import docx def scanfile(rootdir): result = [] for f in os.walk(rootdir): for files in f[2 ...
- 通过performance schema收集慢查询
MySQL5.6起performance schema自动开启,里面涉及记录 statement event的表 mysql> show tables like '%statement%'; + ...
- 【bzoj2400】Spoj 839 Optimal Marks 网络流最小割
题目描述 定义无向图中的一条边的值为:这条边连接的两个点的值的异或值. 定义一个无向图的值为:这个无向图所有边的值的和. 给你一个有n个结点m条边的无向图.其中的一些点的值是给定的,而其余的点的值由你 ...
- Editplus注册码,汉化官方版本
官方认证Edit+简体中文版 https://www.editplus.com/download.html EditPlus注册码在线生成 http://www.jb51.net/tools/edit ...
- java面试题之select、poll和epoll的区别
消息传递方式: select:内核需要将消息传递到用户空间,需要内核的拷贝动作: poll:同上: epoll:通过内核和用户空间共享一块内存来实现,性能较高: 文件句柄剧增后带来的IO效率问题: s ...
- java面试题之Thread类中的start()和run()方法有什么区别
start()方法被用来启动新创建的线程,而且start()内部调用了run()方法, 区别: 当你调用run()方法的时候,只会是在原来的线程中调用,没有新的线程启动: start()方法才会启动新 ...
- LOJ#2302. 「NOI2017」整数
$n \leq 1000000$个操作:一,给$x$加上$a*2^b$:二,问$x$的某个二进制位$k$.$b,k \leq 30n$,$|a| \leq 1e9$. 30暴露了一切..可以把30个二 ...
- 从Java源码到Java字节码
Java最主流的源码编译器,javac,基本上不对代码做优化,只会做少量由Java语言规范要求或推荐的优化:也不做任何混淆,包括名字混淆或控制流混淆这些都不做.这使得javac生成的代码能很好的维持与 ...