html5中文学习网

您的位置: 首页 > 网页制作 > css教程 » 正文

ie下margin不居中的三种解决方法_浏览器兼容教程_CSS_网页制作

[ ] 已经帮助:人解决问题
点评:这篇文章主要介绍了ie下margin不居中的三种解决方法,需要的朋友可以参考下

正常情况下需要将div居中显示时,使用Css样式:margin:0 auto即可,但有时使用margin:0 auto后在FF、Chrome里能居中,而在IE678里不居中的现象。nXzHTML5中文学习网 - HTML5先行者学习网

如下代码:nXzHTML5中文学习网 - HTML5先行者学习网

复制代码
代码如下:
nXzHTML5中文学习网 - HTML5先行者学习网
<style type="text/css">nXzHTML5中文学习网 - HTML5先行者学习网
#con{width:980px;martin:0 auto;}nXzHTML5中文学习网 - HTML5先行者学习网
</style>nXzHTML5中文学习网 - HTML5先行者学习网
<div id="con">margin: 0 auto 内容居中显示</div>nXzHTML5中文学习网 - HTML5先行者学习网
nXzHTML5中文学习网 - HTML5先行者学习网

解决方法一nXzHTML5中文学习网 - HTML5先行者学习网
可以是对网页主体<body>声明文本居中,即body{text-align:center}nXzHTML5中文学习网 - HTML5先行者学习网
即:nXzHTML5中文学习网 - HTML5先行者学习网

复制代码
代码如下:
nXzHTML5中文学习网 - HTML5先行者学习网
<style type="text/css">nXzHTML5中文学习网 - HTML5先行者学习网
body{text-align:center}nXzHTML5中文学习网 - HTML5先行者学习网
#con{width:980px;martin:0 auto;}nXzHTML5中文学习网 - HTML5先行者学习网
</style>nXzHTML5中文学习网 - HTML5先行者学习网
<div id="con">margin: 0 auto 内容居中显示</div>nXzHTML5中文学习网 - HTML5先行者学习网
nXzHTML5中文学习网 - HTML5先行者学习网

解决方法二nXzHTML5中文学习网 - HTML5先行者学习网
其实和解决方法一差不多,只是在要居中的div外层添加多一个div,并使其居中nXzHTML5中文学习网 - HTML5先行者学习网
即:nXzHTML5中文学习网 - HTML5先行者学习网

复制代码
代码如下:
nXzHTML5中文学习网 - HTML5先行者学习网
<style type="text/css">nXzHTML5中文学习网 - HTML5先行者学习网
#con{width:980px;martin:0 auto;}nXzHTML5中文学习网 - HTML5先行者学习网
</style>nXzHTML5中文学习网 - HTML5先行者学习网
<div style=“text-align:center”><div id="con">margin: 0 auto 内容居中显示</div></div>nXzHTML5中文学习网 - HTML5先行者学习网
nXzHTML5中文学习网 - HTML5先行者学习网

解决方法三nXzHTML5中文学习网 - HTML5先行者学习网
出现这个现象的原因在于文档的DTD声明;nXzHTML5中文学习网 - HTML5先行者学习网
修改DTD为nXzHTML5中文学习网 - HTML5先行者学习网

复制代码
代码如下:
nXzHTML5中文学习网 - HTML5先行者学习网
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">nXzHTML5中文学习网 - HTML5先行者学习网
nXzHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助