css3技术

Div+Css使用margin居中常见问题_div+css教程

字号+ 作者:H5之家 来源:H5之家 2015-09-15 14:17 我要评论( )

Div+Css使用margin居中常见问题,学习Div+Css使用margin居中常见问题,Div+Css使用margin居中常见问题,查看Div+Css使用margin居中常见问题,虽然我们知道在CSS中加m

     虽然我们知道在CSS中加margin:0 auto;(意思是:上下边界为0,左右根据宽度自适应)可以让div等块级元素达到居中的效果,但是往往我们发现虽然我们已经加入margin:0 auto;却仍然没有实现居中。
这往往是由以下两种常见原因引起的:

1、没有设置宽度

[CSS在线]-示例代码<div style="margin:0 auto;"></div>
看看上面的代码,根本没有设置DIV的宽度,如何根据宽度自适应呢?新手比较容易忽略的问题!

2、没声明DOCTYPE

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

DOCTYPE代码示例
下面的代码是不是很熟悉?像这样的,在文档最顶端,所有代码之上的乱七八糟的东西,就是用来声明DOCTYPE的!

[CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
如何声明DOCTYPE

 过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法),完整代码如下:

[CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>,

完整代码如下:

[CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
 框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD,完整代码如下:

[CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "">
言归正传有时候我们的margin:0 atuo;没有正常居中的时候,你需要看看你的文档最顶端有没有正确声明DOCTYPE,如果没有的话,简单复制粘贴一下DOCTYPE声明即可!

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • DIV+CSS与TABLE布局的区别_div+css教程

    DIV+CSS与TABLE布局的区别_div+css教程

    2015-09-20 11:13

  • DIV+CSS与TABLE布局的区别_div+css教程

    DIV+CSS与TABLE布局的区别_div+css教程

    2015-09-20 11:13

  • div+css布局视频教程(教程网)_div+css教程

    div+css布局视频教程(教程网)_div+css教程

    2015-09-20 10:47

  • DIV+CSS教程_解决表单的问题_div+css教程

    DIV+CSS教程_解决表单的问题_div+css教程

    2015-09-17 16:54

网友点评