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,左右根据宽度自适应!其 ...
随机推荐
- QR Code Error Correction
QR Code Error Correction - QRStuff.com https://blog.qrstuff.com/2011/12/14/qr-code-error-correction ...
- int ping = 11; 限流 客户端验证与服务端是连接的
int ping = 11; ZooKeeper Programmer's Guide https://zookeeper.apache.org/doc/r3.1.2/zookeeperProgram ...
- Linux网络数据包的揭秘以及常见的调优方式总结
https://mp.weixin.qq.com/s/boRWlx1R7TX0NLuI2sZBfQ 作为业务 SRE,我们所运维的业务,常常以 Linux+TCP/UDP daemon 的形式对外提供 ...
- Jackson学习
Jackson 是一个能够将java对象序列化为JSON字符串,也能够将JSON字符串反序列化为java对象的框架. 本文的所有内容都可以从 Java JSON Jackson Introductio ...
- 如何使用Set去重
let arr = [12,43,23,43,68,12]; let item = [...new Set(arr)]; console.log(item);//[12, 43, 23, 68]
- (万字好文)Dubbo服务熔断与降级的深入讲解&代码实战
原文链接:(万字好文)Dubbo服务熔断与降级的深入讲解&代码实战 一.Dubbo服务降级实战 1 mock 机制 谈到服务降级,Dubbo 本身就提供了服务降级的机制:而 Dubbo 的服务 ...
- ctsc选课
CTSC 1997 大学实行学分制.每门课程都有一定的学分,学生只要选修了这门课并通过考核就能获得相应学分.学生最后的学分是他选修各门课的学分总和. 每个学生都要选择规定数量的课程.有些课程可以直接选 ...
- CVE-2020-1472 域内提权
攻击者通过NetLogon(MS-NRPC),建立与域控间易受攻击的安全通道时,可利用此漏洞获取域管访问权限.成功利用此漏洞的攻击者可以在该网络中的设备上运行经特殊设计的应用程序. 影响版本 Wind ...
- hadoop的Namenode HA原理详解
为什么要Namenode HA? 1. NameNode High Availability即高可用. 2. NameNode 很重要,挂掉会导致存储停止服务,无法进行数据的读写,基于此NameNod ...
- RabbitMQ (简单集群部署操作)
RabbitMQ 集群部署 前期准备 第一步:三台linux系统(centos7.3) 主机名(hostname) 网卡ip node1 192.168.137.138 node2 192.168.1 ...