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,左右根据宽度自适应!其 ...
随机推荐
- Django-初阶实例
调用本地css文件的方法 setting.py里面的内容 import os # Build paths inside the project like this: os.path.join(BASE ...
- Py-解决粘包现象,tcp实现并发,tcp实现传输文件的程序,校验思路,线程与进程
黏包现象 TCP粘包就是指发送方发送的若干包数据到达接收方时粘成了一包,从接收缓冲区来看,后一包数据的头紧接着前一包数据的尾,出现粘包的原因是多方面的,可能是来自发送方,也可能是来自接收方TCP接收到 ...
- Failed to start LSB: starts php-fpm
跟nginx一样都是进程占用,记录下 [root@localhost pazzn]# systemctl status php-fpm.service ● php-fpm-72.service - L ...
- Linux性能监测(系统监测统计命令详解)
通过这个命令,可以最简便的看出系统当前基本状态信息,这里面最有用是负载指标,如果你还想查看当前系统的CPU/内存以及相关的进程状态,可以使用TOP命令. TOP 通过TOP命令可以详细看出当前系统的C ...
- 京东热 key 探测框架新版发布,单机 QPS 可达 35 万
https://mp.weixin.qq.com/s/3URAvUF6zwxeF5Kkc1aWHA 京东热 key 探测框架新版发布,单机 QPS 可达 35 万 原创 Hollis Hollis 2 ...
- BigDecimal add方法问题:调用add后,求和结果没变
import java.math.BigDecimal; public class DecimalAdd { public static void main(String[] args) { BigD ...
- 变量隐藏Accidental Variable Shadowing
6.5 - Variable shadowing (name hiding) | Learn C++ https://www.learncpp.com/cpp-tutorial/variable-sh ...
- RPM 和YUM总结
RPM RPM命名: 安装 rpm -ihv 其他常用的选项: 1. 重新安装 --replacepkgs (或者 --force ) 2. 不考虑依赖 --nodeps (不推荐) 升级: 查询: ...
- 小步前进之WCF简介
WCF 前言 什么是WCF? 契约 合约 前言 在 .NET Framework2.0 以及前版本中,微软发展了 Web Service..NET Remoting 等通信支持. 如果要进行通信,对于 ...
- Language Guide (proto3) | proto3 语言指南(二)标量值类型
标量值类型 标量消息字段可以具有以下类型之一 -- 下表显示了.proto文件中指定的类型,以及自动生成的类中相应的类型: .proto Type 说明 C++ Type Java Type Pyth ...