postion:fixed和margin:0 auto的使用
很多同学将顶部菜单固定,使用postion:fixed,然后使用margin:0 auto进行居中,发现margin:0 auto并不起作用。
通常,我们要让某元素居中,会这样做:
#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'});
}
postion:fixed和margin:0 auto的使用的更多相关文章
- overflow:hidden与margin:0 auto之间的冲突
相对于父容器水平居中的代码margin:0 auto与overflow:hidden之间存在冲突.当这两个属性同时应用在一个DIV上时,在chrome浏览器中将无法居中.至于为啥我也不明白.
- margin:0 auto;不居中
margin:0 auto:不居中可能有以下两个的原因; 1.没有设置宽度<div style="margin:0 auto;"></div>看看上面的代码 ...
- margin:0 auto 与 text-align:center
1.text-align:通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式; text-align:center 设置文本或img标签等一些内联对象的居中. 2.m ...
- margin:0 auto 与 text-align:center 的区别
基本概念: 1.text-align: 属性规定元素中的文本的水平对齐方式; 该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式; 一般情况下设置文本对齐方式的时使用此属性.支 ...
- IE下margin:0 auto为什么不居中?
http://blog.sina.com.cn/s/blog_68c6be330101k7kn.html 我们经常用DIV+CSS布局网页的时候,正常情况下需要将div居中显示时,使用Css样式:ma ...
- margin:0 auto在IE中失效的解决方案
转自:http://www.cnblogs.com/hongchenok/archive/2012/11/29/2795041.html 最近在开发项目的时候,发现在火狐浏览器中设置外容器margin ...
- html页面docutype前面出现字符会导致IE678 margin:0 auto;失效
html页面<!DOCTYPE html>前面出现字符会导致IE678 margin:0 auto;失效
- CSS样式margin:0 auto不居中
<style type="text/css">html,body{height:100%;width:960px;}.container{background-colo ...
- css中margin:0 auto没作用
很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...
随机推荐
- Py-多态,封装,反射,描述符,包装标准类型,面向对象进阶
多态: 对象可以通过他们共同的属性和动作来访问,而不需要考虑他们的类多态是继承的应用 class H2o: def __init__(self,temp): self.temp=temp def ht ...
- CentOS7.9静默安装Oracle19C软件
CentOS7.9静默安装Oracle19C软件 Oracle发布了支持的版本.可以看到了Oracle11gR2和Oracle12C.一直到2022年就不支持patch和服务.(感慨Oracle 11 ...
- flume agent的内部原理
flume agent 内部原理 1.Source采集数据,EventBuilder.withBody(body)将数据封装成Event对象,source.getChannelProcessor( ...
- Linux centos7编译源码安装redis
1.安装准备 ① 由于redis底层用c语言编写的,安装redis需要先将官网下载的源码进行编译,编译依赖make和gcc环境,如果没有则需要安装(一般系统中已经装了了make和gcc,无须再装) 安 ...
- sentry 错误监控 报警
错误监控 报警 Sentry | Error Tracking Software - JavaScript, Python, PHP, Ruby, more https://sentry.io/wel ...
- 【笔记】学习markdown
经过来自学长(姐?)的 嘲讽 善意提醒后,我才知道这个博客园好像 资瓷 markdown 于是我决定要认真学习markdown(绝不是因为洛谷题解又过不去了) 正常点: 由于没人教,我上网查了一下 一 ...
- LOJ10141染色
SDOI 2011 染色 给定一棵有 n 个节点的无根树和 m 个操作,操作共两类. 将节点 a 到节点 b 路径上的所有节点都染上颜色: 询问节点 a 到节点 b 路径上的颜色段数量,连续相同颜色的 ...
- cookie机制、session机制
会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...
- RabbitMQ (基础知识)
AMQP简介 AMQP(Advanced Message Queue )即:高级消息队列协议:,是应用层协议的一个开放标准,为面向消息的中间件设计:高级消息队列协议使得遵从该规范的客户端应用和消息中间 ...
- 常用的trigger表达式
1.Name:Incoming traffic on interface {#SNMPVALUE} is greater than 300Mb, now is {ITEM.VALUE} Express ...