很多同学将顶部菜单固定,使用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的使用的更多相关文章

  1. overflow:hidden与margin:0 auto之间的冲突

    相对于父容器水平居中的代码margin:0 auto与overflow:hidden之间存在冲突.当这两个属性同时应用在一个DIV上时,在chrome浏览器中将无法居中.至于为啥我也不明白.

  2. margin:0 auto;不居中

    margin:0 auto:不居中可能有以下两个的原因; 1.没有设置宽度<div style="margin:0 auto;"></div>看看上面的代码 ...

  3. margin:0 auto 与 text-align:center

    1.text-align:通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式;            text-align:center 设置文本或img标签等一些内联对象的居中. 2.m ...

  4. margin:0 auto 与 text-align:center 的区别

    基本概念: 1.text-align: 属性规定元素中的文本的水平对齐方式;   该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式;  一般情况下设置文本对齐方式的时使用此属性.支 ...

  5. IE下margin:0 auto为什么不居中?

    http://blog.sina.com.cn/s/blog_68c6be330101k7kn.html 我们经常用DIV+CSS布局网页的时候,正常情况下需要将div居中显示时,使用Css样式:ma ...

  6. margin:0 auto在IE中失效的解决方案

    转自:http://www.cnblogs.com/hongchenok/archive/2012/11/29/2795041.html 最近在开发项目的时候,发现在火狐浏览器中设置外容器margin ...

  7. html页面docutype前面出现字符会导致IE678 margin:0 auto;失效

    html页面<!DOCTYPE html>前面出现字符会导致IE678 margin:0 auto;失效

  8. CSS样式margin:0 auto不居中

    <style type="text/css">html,body{height:100%;width:960px;}.container{background-colo ...

  9. css中margin:0 auto没作用

    很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其 ...

随机推荐

  1. vue、element-ui 后台菜单切换重新请求数据

    我们在做后台管理系统时,通常将数据请求挂载到created或mounted钩子中,但这样引发的问题是它只会被出发一次,如果不同菜单中数据关联性较大,切换过程中未及时更新数据,容易引发一些问题,这种情况 ...

  2. CentOS7,非LVM根分区扩容步骤:

    1.查看现有的分区大小 非LVM分区,目前磁盘大小为40G,根分区总容量为40G,(是自定义分区安装的) 2.关机增加磁盘大小至100G 如果你们是vmwaer虚拟软件安装的那如下入扩容: 3.查看磁 ...

  3. 通过封装openpyxl模块实现自己的Excel操作类

    """ excel类封装需要提供以下功能: 1.选择表单功能 2.读取一个单元格的数据功能 3.读取一行数据功能 4.读取表单中所有数据功能 5.往单元格中写入数据功能 ...

  4. tcpdump安装与参数详解

    Centos7安装Tcpdump 对于大部分的Linux操作系统,已经默认安装了tcpdump,可以通过以下命令查看: [root@localhost local]# tcpdump --versio ...

  5. 【汇编实践】go assembly

    https://mp.weixin.qq.com/s/B577CdUkWCp_XgUc1VVvSQ asmshare/layout.md at master · cch123/asmshare htt ...

  6. MySQL 压测

    https://mp.weixin.qq.com/s/vKJZp5cGUetHokGh2EZUXg mysqlslap --iterations=100 --create-schema='test' ...

  7. GDB查看内存命令(x命令) 用gdb查看指定地址的内存内容

    GDB查看内存命令(x命令) - super119 - 博客园 https://www.cnblogs.com/super119/archive/2011/11/18/2254382.html 可以使 ...

  8. POSTGIS

    https://blog.csdn.net/qq_35732147/article/details/85256640 官方文档:http://www.postgis.net/docs/ST_Buffe ...

  9. JQuery——相关练习

    ####JQuery的基本语法 <!--导入JQuery文件--> <script src="js/jquery-3.1.1.min.js"> /*带min ...

  10. python——模块、标准库、第三方模块安装

    模块(module)简介 模块化--指将一个完整的程序分解为一个一个小的模块,通过将模块组合,来搭建出一个完整的程序. 模块化的特点: ① 方便开发 ② 方便维护 ③ 模块可以复用! 在Python中 ...