`
- 浏览:
39152 次
-
很多初学制作网页的朋友，可能会遇到的一个常见问题，就是在CSS中加了margin:0 auto;却没有效果，不能居中的问题！margin:0
auto;的意思就是：上下边界为0，左右根据宽度自适应！其实就是~~水平居中的意思，呵呵！小一在这里说两个典型的错误引起的不能居中的问题：
1、没有设置宽度
<div style="margin:0 auto;"></div>
看看上面的代码，根本没有设置DIV的宽度，如何根据宽度自适应呢？新手比较容易忽略的问题！
2、没声明DOCTYPE
①DOCTYPE是document type（文档类型）的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分！
②看看下面的代码，是不是很熟悉？像这样的，在文档最顶端，所有代码之上的乱七八糟的东西，就是用来声明DOCTYPE的！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
③你有三种选择，用来声明DOCTYPE
* 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
* 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
* 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
④至于选择哪种。。使用过度的就可以了。。
说了半天，margin:0 atuo;不起作用，不能居中的话，看看你的文档最顶端有没有声明DOCTYPE，没有就复制粘贴一下，就可以了！
还有就是 margin:0 auto; 和 margin-left:auto; margin-right:auto;的现实效果有时间还不一样，其原意可能在于设置了margin-top的高度不为0时，会出现意想不到的效果。
分享到：
相关推荐
在CSS布局中，水平居中是一种常见的需求，而`margin: 0 auto`是一个常用的实现方式。这个样式声明表示元素的上下外边距为0，左右外边距自动调整，以此来达到在父容器内水平居中的效果。然而，很多初学者在尝试使用...
`margin: 0 auto` 是一个常见的CSS技巧，用于实现块级元素在父容器中的水平居中对齐。这个方法主要适用于固定宽度的元素，并且在现代浏览器中表现良好。我们将深入探讨这一概念，以及如何解决不同浏览器之间的兼容性...
总结来说，通过text-align属性可以简单地实现内联元素或内联块级元素的水平居中，而要实现块级元素的居中，则需要使用margin: 0 auto;方法，并确保块级元素具有宽度属性。这两种方法都是CSS布局中的基础技术，非常...
很多初学制作网页的朋友，可能会遇到的一个常见问题，就是在CSS中加了margin:0 auto;却没有效果，不能居中的问题！margin:0 auto;的意思就是：上下边界为0，左右根据宽度自适应！其实就是~~水平居中的意思，呵呵！小...
在描述的问题中，开发者遇到了一个问题：在Firefox中，一个`div`元素（`.wrap`）可以成功地通过`margin: 0 auto;`居中，但在IE下却无法实现。原因在于，`.wrap`元素的父级元素（`.wrap_parent`）缺少了一个关键的...
这里我们讨论的是在HTML中使用`margin: 0 auto`来实现元素水平居中，但遇到页面不居中的问题及其解决方案。这个问题通常涉及到浏览器的解析差异，尤其是Internet Explorer（IE）与更现代的浏览器之间的差异。 首先...
解决这个问题的一种方法是在`<body>` 标签内设置`text-align: center`，这会使整个页面内容居中，然后通过设置子元素的`margin: 0 auto` 来使其在父元素中居中。 另一种解决方案是添加文档类型声明（DOCTYPE），如`...
为了解决`table`在`div`中居中的问题，我们可以使用`margin:auto`。这是一个CSS技巧，它适用于块级元素，并且只有当元素的宽度被固定或限制在一个特定的范围时，才能有效地将元素居中。`margin:auto`会使元素的左右...
(意思是:上下边界为0,左右根据宽度自适应)可以让div等块级元素达到居中的效果，但是往往我们发现虽然我们已经加入margin:0 auto;却仍然没有实现居中。 这往往是由以下两种常见原因引起的： 1、没有设置宽度 2、没...
复制代码代码如下: XHTML CODE： ”layout”>一列固定宽度居中</div> CSS CODE： 复制代码代码如下: #layout{ background-color:#C7E091; border:2px solid #B0BCA6;... margin:0px auto;/*外边距参数*/ }
正常情况下需要将div居中显示时，使用Css样式:margin:0 auto即可，但有时使用margin:0 auto后在FF、Chrome里能居中，而在IE678里不居中的现象。 如下代码: 复制代码代码如下:<style type=”text/css”>#con{...
3. 使用`margin:0 auto`可以使元素在容器中水平居中，但必须确保元素具有固定的宽度，并且`margin:0 auto`应用于元素自身，而非父元素。 4. 试图为内联元素如`<img>`设置`margin`属性通常无效，除非将其转换为块级...
一种解决方案是通过设置`body`的`text-align`属性为`center`，这将使得所有内部文本内容居中，包括设置了`margin: 0 auto;`的元素： ```css body { text-align: center; } #cnbruce { width: 500px; background...