div样式在IE下margin:0 auto不居中多种解决方法
2012-06-29 00:48:18 | 1934次阅读 | 评论：0 条 | itokit
正常情况下需要将div居中显示时，使用Css样式:margin:0 auto即可，但有时使用margin:0 auto后在FF、Chrome里能居中，而在IE678里不居中的现象。
如下代码:
XML/HTML Code复制内容到剪贴板
<style type="text/css">
#con{width:980px;martin:0 auto;}
</style>
<div id="con">margin: 0 auto 内容居中显示</div>
解决方法一
可以是对网页主体<body>声明文本居中，即body{text-align:center}
即:
XML/HTML Code复制内容到剪贴板
<style type="text/css">
body{text-align:center}
#con{width:980px;martin:0 auto;}
</style>
<div id="con">margin: 0 auto 内容居中显示</div>
解决方法二
其实和解决方法一差不多，只是在要居中的div外层添加多一个div,并使其居中
即：
XML/HTML Code复制内容到剪贴板
<style type="text/css">
#con{width:980px;martin:0 auto;}
</style>
<div style=“text-align:center”><div id="con">margin: 0 auto 内容居中显示</div></div>
解决方法三
出现这个现象的原因在于文档的DTD声明；
修改DTD为
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
分享到：
相关推荐
div垂直居中屏幕的方法，兼容IE6 7 8 Firefox
在IE6及更低版本中，可以通过设置`body`的`text-align`属性为`center`，使所有内部元素居中。然后，为需要居中的特定元素设置`text-align: left`，并使用`margin: 0 auto`来实现水平居中。如下所示： ```css body...
本话题主要探讨如何在IE7及以上的浏览器中实现元素的垂直居中效果。 在IE7+中实现垂直居中，我们可以采用多种方法，每种方法都有其适用场景和优缺点。以下是一些常见的技术： 1. **CSS Table布局**： - 设置父...
### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中，实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说，这相对容易实现。但对于那些高度未知或者动态变化的元素，尤其是嵌套在另一个未知...
DIV+CSS 图片居中效果 兼容 IE FF。。等浏览器
本篇文章将探讨两个在IE6中常见的问题及其解决方案：去除div最小高度限制和实现div垂直居中。 首先，让我们解决IE6中的div最小高度问题。在IE6中，当尝试设置一个较小的高度（如3px）时，div的实际高度可能不会按照...
在本篇内容中，介绍了如何使用纯CSS技术实现div元素在网页中的自适应居中布局，同时确保兼容性可以覆盖至较旧的浏览器版本，如IE7、Chrome和Firefox。此处的自适应居中，指div能够在其父容器内水平及垂直方向上都...
带DOCTYPE的写法。。 ------------------ CSS+DIV写的，上下固定高度，中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ...附送一个 DIV垂直居中的页面~~~
### div错位解决IE6/IE7/IE8样式不兼容问题 在Web开发中，兼容性一直是开发者面临的重要挑战之一。特别是在早期浏览器版本中，如Internet Explorer 6（IE6）、IE7 和 IE8，由于这些浏览器对于CSS的支持存在较大差异...
在本例中，我们讨论的是如何使一个内嵌的`<div>`元素在它的父`<div>`中水平居中对齐，同时兼容Firefox和Internet Explorer（IE）浏览器。这个问题涉及到CSS的布局特性，主要包括`text-align`属性和自动外边距（`...
本文将详细介绍如何在兼容IE浏览器的情况下，使用CSS实现DIV元素的垂直居中。首先，我们需要明确一点，CSS中的`vertical-align`属性主要用于表格单元格（如`<td>`）和其他内联元素的垂直对齐，而不是用于块级元素如`...
关于CSS 控制DIV水平居中问题，我看到很多新人搞不明月。记得第一次看CSS是一个老外写的书，那个里面谈到居中使用。 margin-left:auto;margin-right:auto; 其实等同于： margin:0 auto; 于是可以使用这种方式，...
标题中的“DIV未知高度的垂直居中代码”指的是在网页设计中如何使一个具有未知高度的<div>元素在页面上实现垂直居中的技术。在Web开发中，这是一项常见的需求，尤其是在响应式设计中，当内容高度不确定时，仍然希望...
CSS 控制 div 中元素居中的示例 本文将讨论 CSS 中常见的让元素水平居中显示的方法。这些方法可以让开发者更好地控制 div 中元素的布局，以实现更好的用户体验。 1. 使用自动外边距实现居中 CSS 中首选的让元素...
但在IE6、7中，若要让内容在div内垂直居中，除了设置`vertical-align:middle`，还需要将`line-height`设置为与div相同的高度。这种方法需要注意内容不应换行，否则可能导致对齐失效。 其次，`margin`加倍问题主要...
总结起来，要实现“div+css布局限制图片最大宽度图片水平垂直居中兼容IE6”，我们需要结合使用`max-width`属性限制图片宽度，通过`text-align`和内联块级元素实现水平居中，以及利用`vertical-align`和负`margin`...
综上所述，针对“div不定宽高的水平和垂直居中”以及兼容IE67的需求，我们可以选择使用CSS传统方法（如绝对定位）或者结合JavaScript来实现。考虑到不同的浏览器兼容性和场景适应性，应根据实际项目需求来选择最合适...