IE下margin:0 auto为什么不居中?
http://blog.sina.com.cn/s/blog_68c6be330101k7kn.html
我们经常用DIV+CSS布局网页的时候,正常情况下需要将div居中显示时,使用Css样式:margin:0 auto就可以了,但有时使用margin:0 auto后在FireFox浏览器、谷歌Chrome浏览器里能居中,而在IE678里却不能不居中。
例如以下代码:
<style type="text/css">
#con{width:980px;martin:0 auto;}
</style>
<div id="con">测试margin: 0 auto
内容是否居中显示</div>
那我们该怎么办呢?那下面建站教程网就给出三种有效解决办法:
解决方法一
因为所有HTML页面的起初定义都在DTD文档里,所以出现这个现象的原因在于文档的DTD声明,应该修改DTD为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
解决方法二
可以是对网页主体<body>声明文本居中,即body{text-align:center}
即:
<style type="text/css">
body{text-align:center}
#con{width:980px;martin:0 auto;}
</style>
<div id="con">测试margin: 0 auto
内容是否居中显示</div>
解决方法三
其实和解决方法一差不多,只是在要居中的div外层添加多一个div,并使其居中
即:
<style type="text/css">
#con{width:980px;martin:0 auto;}
</style>
<div
style=“text-align:center”><div
id="con">测试margin: 0 auto
内容是否居中显示</div></div>
IE下margin:0 auto为什么不居中?的更多相关文章
- 图片margin:0 auto;为何不居中
图片margin:0 auto;为何不居中 关键: img元素 display设为block 代码: <!DOCTYPE html> <html> <head> & ...
- margin:0 auto为何会居中?
margin: 0 auto;为何会居中呢??? 一开始的学习html的时候,就是只知道块级元素margin:0 auto就能居中 但是后来就很好奇 margin: auto 0;为何不能垂直居中? ...
- css中两种居中方式text-align:center和margin:0 auto 的使用场景
关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...
- 在ie浏览器,360浏览器下,margin:0 auto;不居中的原因
转自 http://blog.sina.com.cn/s/blog_6eef6bf60100nn4m.html margin:0 auto:不居中可能有以下两个的原因 没有设置宽度 看看上面的代码,根 ...
- CSS样式margin:0 auto不居中
<style type="text/css">html,body{height:100%;width:960px;}.container{background-colo ...
- 绝对定位后,position:absolute;不能使用margin: 0 auto;实现居中;
声明: web小白的笔记,欢迎大神指点!联系QQ:1522025433. 我们都知道margin: 0 auto:可也实现块状元素的水平居中:但是对于绝对顶为的元素就会失效: 请看实例: <!d ...
- IE8 margin:0 auto 不能居中显示的问题
ie8下面margin:0 auto;不能居中的解决方案,ie8兼容性代码 今天写了个div,用margin:0 auto:来定义他的属性,让他居中,结果,竟然无效. 一开始以为是css里的代码冲突了 ...
- 正确的使用margin:0 auto与body{text-align:center;}实现元素居中(转)
body{text-align:center}与margin:0 auto的异同? text-align是用于设置或对象中文本的对齐方式.一般情况下我们设置文本对齐方式的时候需要用此属性进行设置 我们 ...
- margin:0 auto;不居中
margin:0 auto:不居中可能有以下两个的原因; 1.没有设置宽度<div style="margin:0 auto;"></div>看看上面的代码 ...
随机推荐
- PHP数据库操作
PHP实现数据库的增删改查 <?php $conn=mysql_connect('localhost','root','root'); if(!$conn){ echo "connec ...
- MVC – 7.Razor 语法
7.1 Razor视图引擎语法 Razor通过理解标记的结构来实现代码和标记之间的顺畅切换. @核心转换字符,用来 标记-代码 的转换字符串. 语境A: @{ string rootName=&quo ...
- 在python3.5下安装scrapy包
此前scrapy只支持python2.x 但是最新的1.1.0rc1已结开始支持py3了 如果电脑上安装了scrapy的依赖包,诸如lxml.OpenSSL 1.你直接下载Scrapy-1.1.0rc ...
- Generic Access Profile
转自:https://www.bluetooth.com/specifications/assigned-numbers/generic-access-profile Assigned numbe ...
- 设计模式学习之适配器模式(Adapter,结构型模式)(14)
参考链接:http://www.cnblogs.com/zhili/p/AdapterPattern.html一.定义:将一个类的接口转换成客户希望的另一个接口.Adapter模式使得原本由于接口不兼 ...
- Pyqt QSystemTrayIcon 实现托盘效果
pyqt的托盘效果很好实现,在Pyqt的demo中有个例子 路径:PyQt4\examples\desktop\systray.py 今天我就仿这个Tray效果做效果 一. 创建UI trayicon ...
- Codeforces Round #363 Fix a Tree(树 拓扑排序)
先做拓扑排序,再bfs处理 #include<cstdio> #include<iostream> #include<cstdlib> #include<cs ...
- ASP.NET的新成员ASP.NET WebHooks
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:前几天微软除了发布了ASP.NET 5的Beta7之外,还有一个值得关注的东西,就是A ...
- Ubuntu下配置samba实现文件夹共享
转自:http://www.cnblogs.com/phinecos/archive/2009/06/06/1497717.html 一. samba的安装: sudo apt-get insall ...
- 在linux配置NFS用于RAC的搭建
rac的共享存储有很多种搭建方式,nfs是其中一种.生产环境一般不采用nfs,多用于测试. nfs搭建步骤大致分为如下: 1.划盘 给节点1挂载一块磁盘,并将磁盘分区,并格式化,再挂载 [root@n ...