百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> IE的margin居中问题几种解决办法
分享本文到:

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

发布时间:01/15 来源: 浏览: 关键词:
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>

责任编辑:
打赏