CSS中设置margin:0 auto; 水平居中无效的原因分析

学习教程tuzi2019-04-17 11:51:51A⁺A^-

很多初学制作网页的朋友，可能会遇到的一个常见问题，就是在CSS中加了margin:0 auto;却没有效果，不能居中的问题，margin:0 auto;的意思就是：上下边界为0，左右根据宽度自适应，其实就是水平居中的意思，在这里说两个典型的错误引起的不能居中的问题：

1、没有设置宽度

看看上面的代码，根本没有设置DIV的宽度，如何根据宽度自适应呢？新手比较容易忽略的问题。

2、没声明DOCTYPE

1）DOCTYPE是document type（文档类型）的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分。

2）看看下面的代码，是不是很熟悉？像这样的，在文档最顶端，所有代码之上的乱七八糟的东西，就是用来声明DOCTYPE的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3）你有三种选择，用来声明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">

4）至于选择哪种，使用过渡的就可以了。

说了半天，margin:0 atuo;不起作用，不能居中的话，看看你的文档最顶端有没有声明DOCTYPE，没有就复制粘贴一下，就可以了。

还有就是 margin:0 auto; 和 margin-left:auto; margin-right:auto;的现实效果有时间还不一样，其原因可能在于设置了margin-top的高度不为0时，会出现意想不到的效果。

点击这里复制本文地址

声明

本站发布所有广告信息、下载资源，均来自互联网，非本站自制，与本站无关。如有侵犯您的合法权益请来信告之。我们会在三个工作日内予以清除。

本站中所有资料、资源文件均来自于网络搜索，仅作为技术学习研究之用，请必须在24小时内删除所下载文件，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担。

本站保证站内提供的所有可下载资源（软件等等）都是按“原样”提供，本站未做过任何改动；但本网站不保证本站提供的下载资源的准确性、安全性和完整性；同时本网站也不承担用户因使用这些下载资源对自己和他人造成任何形式的损失或伤害。

访问本站的用户必须明白，[资源爱好者]对提供下载的软件等不拥有任何权利，其版权归该下载资源的合法拥有者所有。

本站所有资源均不提供相关技术服务，如果源码下载地址失效则请联系站长进行补发。

本站所有资源展现图片仅供参考

资源爱好者 © 本站发布所有资源，均来自互联网，非本站自制，分享目的仅供大家学习与参考，与本站无关。
如有侵犯您的合法权益请来信告之。我们会在三个工作日内予以清除。邮箱：admin?aihao.org
关于我们|广告合作|网站地图|冀ICP备14009590号|冀公网安备 13018302000072号