您的位置：首页 > 网站优化 > css  >  IE的margin居中问题几种解决办法

IE的margin居中问题几种解决办法

 更新时间：2016年9月14日 14:19  点击：1339
margin居中我们只要定义auto即可了，但是在ie浏览器中有朋友会发现margin居中没有用了，那么IE的margin居中问题要如何来处理呢，下面我们来看看。

自从开始使用vim写wiki后，又折腾了一个感觉还不错的样式。但是在IE中却出现了样式不兼容的情况：一个自定义的<wrap>标签总是不能居中，而且css样式中写的圆角没效果。因为平时较少使用IE所以一直不在意，没有去改它。今天有空好好搜索了一番，原来这个问题很好解决。

使用 myeclipse 开发，不管前台后台，因为 myeclipse 生成的 jsp 文件 DOCTYPE 文件头不包含 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" dtd 文件，使得我一直认为 IE 不支持 margin 居中，再加上一个学 C# 的童鞋也是建议我不要一直使用 margin 居中，IE 对 auto 解析的不够好


解决办法是

在 DOCTYPE 中加上 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 如下一段简单的代码便可在主流浏览器中居中，包括IE6：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>margin auto</title>
</head>
<body>
    <wrap style="width:100px;height:100px;margin:30px auto;background:red;">
    我的内容
    </wrap>
</body>
</html>
还有的解决办法就是使用 XHTML 文件头：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>margin auto</title>
</head>
<body>
    <wrap style="width:100px;height:100px;margin:30px auto;background:red;">
    我的内容
    </wrap>
</body>
</html>

其它办法补充

解决方法一
 
可以是对网页主体<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>

[!--infotagslink--]

相关文章

  • PHP session_start()很慢问题分析与解决办法

    本文章来给各位同学介绍一下关于PHP session_start()很慢问题分析与解决办法，希望碰到此问题的同学可进入参考。 最近在做东西的时候发现一个问题 有一个接口挂...2016-11-25

  • php中json_decode()和json_encode()用法与中文不显示解决办法

    本文章介绍了关于php中json_decode()和json_encode()用法与中文不显示解决办法，有需要的朋友可以参考一下下。 php中json_decode()和json_encode() 1.json_decode(...2016-11-25

  • phpexcel导出数据身份证后四位0000解决办法

    在php中我们如果要导入excel数据我们通常会使用phpexcel插件了，但是有朋友会发与使用phpexcel导出数据出现身份证后四位是0000情况了，下面我们就来看解决办法。 最...2016-11-25

  • 401错误码代表什么 401错误解决办法

    401是HTTP状态码的一种，属于“请示错误”，表示请求可能出错，已妨碍了服务器对请求的处理。具体的401错误是指：未授权，请求要求进行身份验证。登录后，服务器可能会返回对页面...2017-01-22

  • apache网站提示503错误解决办法

    Apache status 503 的原因大致有如下几种情况 ： 1、 CPU 负载过高，服务器响应不过来，返回503 2、 系统连接数超限，超过MaxVhostClients的上限，返回503 3、 单IP连接数超限，超过M...2016-01-28

  • Perl CPAN::Modulelist的解决办法

    今天用CPAN安装Term::ReadLine，报了个这样的错误 Going to read /root/.cpan/sources/modules/03modlist.data.gz Can't locate object method "data" via package "C...2016-11-25

  • phpStudy访问速度慢和启动失败的解决办法

    下面给大家介绍phpstudy访问速度慢的解决办法。1、修改mysql数据库链接地址为ip地址127.0.0.1。2、使用最新版本，这个坑了我好久时间。下面一段内容是关于phpstudy启动失败的解决办法。php5.3、5.4和apache都是用vc9编...2015-11-24

  • PHP传值到不同页面的三种常见方式及php和html之间传值问题

    在项目开发中经常见到不同页面之间传值在web工作中，本篇文章给大家列出了三种常见的方式。接触PHP也有几个月了，本文总结一下这段日子中，在编程过程里常用的3种不同页面传值方法，希望可以给大家参考。有什么意见也希望大...2015-11-24

  • PHP Curl出现403错误的解决办法

    自己用的小PHP应用，使用curl抓网页下来处理，为了穿墙方便，使用Privoxy作为代理，便于选择哪些网站使用proxy、哪些不用。但今天却遇到了奇怪的问题，访问google baidu这些网站居然都返回403错误，而访问其他的一些网站没事，如果...2014-05-31

  • js修改input的type属性问题探讨

    js修改input的type属性有些限制。当input元素还未插入文档流之前，是可以修改它的值的，在ie和ff下都没问题。但如果input已经存在于页面，其type属性在ie下就成了只读属性了，不可以修改。...2013-10-19

  • Mysql常见问题集锦

    1，utf8_bin跟utf8_general_ci的区别 ci是 case insensitive, 即 "大小写不敏感", a 和 A 会在字符判断中会被当做一样的; bin 是二进制, a 和 A 会别区别对待. 例如你运行: SELECT * FROM table WHERE txt = 'a'...2013-10-04

  • Mysql大小写敏感的问题

    一、1 CREATE TABLE NAME(name VARCHAR(10)); 对这个表，缺省情况下，下面两个查询的结果是一样的：复制代码 代码如下: SELECT * FROM TABLE NAME WHERE name='clip'; SELECT * FROM TABLE NAME WH...2015-03-15

  • PHP判断上传文件类型的解决办法

    分享给大家php判断上传文件类型的方法，大家一起学习学习。/** * 读取文件前几个字节 判断文件类型 * @return String */ function checkTitle($filename){ $file=fopen($filename, "rb"); $bin=fread($file, 2); /...2015-10-21

  • linux mint 下mysql中文支持问题

    一.mysql默认不支持中文,它的server和db默认是latin1编码.所以我们要将其改变为utf-8编码,因为utf-8包含了地球上大部分语言的二进制编码 1.关闭mysql服务 sudo /etc/init.d/mysql stop 2.修改mysql配置文件 mysql配...2015-10-21

  • android.os.BinderProxy cannot be cast to com解决办法

    本文章来给大家介绍关于android.os.BinderProxy cannot be cast to com解决办法，希望此文章对各位有帮助呀。 Android在绑定服务的时候出现java.lang.ClassCastExc...2016-09-20

  • MYSQL数据库使用UTF-8中文编码乱码的解决办法

    1.用phpmyadmin创建数据库和数据表 创建数据库的时候，请将“整理”设置为：“utf8_general_ci” 或执行语句： 复制代码 代码如下:CREATE DATABASE `dbname` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci; 创...2015-10-21

  • php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法

    最近遇到一个问题，就是在使用php的mail函数发送utf-8编码的中文邮件时标题出现乱码现象，而邮件正文却是正确的。最初以为是页面编码的问题，发现页面编码utf-8没有问题啊，找了半天原因，最后找到了问题所在。 1.使用 PEAR 的...2015-10-21

  • PHP页面转UTF-8中文编码乱码的解决办法

    对于乱码这个问题php开发者几乎都会有碰到过，我们下面主要是介绍了php文件乱码和页面乱码。PHP页面转UTF-8编码问题 1.在代码开始出加入一行： header("Content-Type: text/html;charset=utf-8"); 2.PHP文件编码问题...2015-10-21

  • Android开发之PhoneGap打包及错误解决办法

    下面来给各位简单的介绍一下关于Android开发之PhoneGap打包及错误解决办法，希望碰到此类问题的同学可进入参考一下哦。 在我安装、配置好PhoneGap项目的所有依赖...2016-09-20

  • Ubuntu15下mysql5.6.25不支持中文的解决办法

    apt-get install 安装的，不是源码包安装的mysql1 修改mysql的配置文件/etc/mysql/conf.d/mysql.cnf在[mysql]的下方加入如下语句:(注：这个文件下没有配置，只有【mysql】)no-auto-rehash default-character-set=utf8/etc/...2015-10-21