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(下 ...
随机推荐
- BBS-登录
from django.db import models # Create your models here. from django.contrib.auth.models import Abstr ...
- python递归函数、二分法、匿名函数、(sorted、map、filter内置函数应用)
#函数递归是一种特殊的函数嵌套调用,在调用一个函数的过程中,又直接或间接的调用该函数本身递归必须要有两个明确的阶段: 递推:一层一层递归调用下去,强调每进入下一层递归问题的规模都必须有所减少 回溯:递 ...
- oracle主键设置与oracle序列
第一步:添加主键(如果已有且是自己命名的可略过) 一个表中要有主键,我们建主键的时候要自己命名,如果不是可能在后边遇到“主键唯一,不能自动添加”的问题. 设置主键: alter table " ...
- 【bzoj3252】攻略 贪心+DFS序+线段树
题目描述 题目简述:树版[k取方格数] 众所周知,桂木桂马是攻略之神,开启攻略之神模式后,他可以同时攻略k部游戏. 今天他得到了一款新游戏<XX半岛>,这款游戏有n个场景(scene),某 ...
- [AtCoderContest015D]A or...or B Problem
[AtCoderContest015D]A or...or B Problem 试题描述 Nukes has an integer that can be represented as the bit ...
- BZOJ1297 [SCOI2009]迷路 【矩阵优化dp】
题目 windy在有向图中迷路了. 该有向图有 N 个节点,windy从节点 0 出发,他必须恰好在 T 时刻到达节点 N-1. 现在给出该有向图,你能告诉windy总共有多少种不同的路径吗? 注意: ...
- 刷题总结——生产产品(vijo1243)
题目: 描述 在经过一段时间的经营后,dd_engi的OI商店不满足于从别的供货商那里购买产品放上货架,而要开始自己生产产品了!产品的生产需要M个步骤,每一个步骤都可以在N台机器中的任何一台完成,但生 ...
- P4513 小白逛公园 (线段树)
题目链接 Solution 线段树是一门比较刁钻的手艺... 此题我们需要维护 \(4\) 个变量: \(amx\) 代表当前节点的最大值. \(lmx\) 代表当前节点以左端点为起点的区间最大值. ...
- input弹出的手机键盘搜索事件
一.input的搜索框 在input标签里面把type设置为search就可以了.弹出的手机键盘回车键也会变成搜索或者是搜索的图标. <input id="search" ...
- 三读bootmem【转】
转自:http://blog.csdn.net/lights_joy/article/details/2704788 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] 11 ...