欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 程序代码 > CSS小课堂:margin:0 auto; 水平居中无效原因分析
这篇文章主要为大家详细介绍了CSS小课堂:margin:0 auto; 水平居中无效原因分析,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

关于页面、文字、容器居中的问题,361模板在前面的教程《DIV+CSS布局常用居中方法介绍》里已经做过比较详细的介绍。但是有几个朋友在使用里面的居中代码margin:0 auto; 水平居中的时候反映无效!就这个问题,361模板给大家做个答疑。


CSS小课堂:margin:0 auto; 水平居中无效原因分析

出现margin:0 auto; 水平居中无效一般是如下2种情况造成。

第一种情况、容器没有设置宽度

当我们使用margin:0 auto; 水平居中的时候,需要设置容易的宽度,只有知道了宽度是多少我们的代码才能判断如何居中,例如

<div style="margin:0 auto;"></div>

上面的代码如何没有设置DIV的宽度,那么就肯定不能实现水平居中了,这个问题是新手比较容易忽略的问题。

第二种可能、没声明DOCTYPE

首先我们先来了解一下,什么是DOCTYPE,如下图:

什么是DOCTYPE

DOCTYPE是document type(文档类型)的简写,在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分。我们从上图就可以看出,在新建一个网站的时候,在其顶部都会出现这样的一个申明。

我们一般可以用三种方式来书写DOCTYPE。如下:

1、过渡的(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">

2、严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>,完整代码如下:

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

3、框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD,完整代码如下:

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

上面几种DOCTYPE都是可以的,在增加了申明后,我们的margin:0 auto; 水平居中代码就能实现其水平居中效果了。

以上就是CSS小课堂:margin:0 auto; 水平居中无效原因分析的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: css margin 水平居中 居中无效

上一篇文字图片滚动实现方法介绍及区别分析

下一篇PHP小课堂:PHP替换敏感词的写法

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在