使用margin居中常见问题
来源:互联网 发布:mac 终端 默认路径 编辑:程序博客网 时间:2024/06/03 17:02
虽然我们知道在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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如何声明DOCTYPE
过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法),完整代码如下:
[CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>,完整代码如下:
[CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD,完整代码如下:
[CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
言归正传有时候我们的margin:0 atuo;没有正常居中的时候,你需要看看你的文档最顶端有没有正确声明DOCTYPE,如果没有的话,简单复制粘贴一下DOCTYPE声明即可!
本文来自CSS在线:http://www.csscss.org/cssarticle/2010510873.shtml
- 使用margin居中常见问题
- 使用margin+border实现居中
- IE下div使用margin:0 auto;不居中
- div使用margin:0px auto 不居中
- 元素居中使用margin:0 auto;为何没效果
- margin:auto实现居中
- margin布局居中显示
- margin+padding实现居中
- flex+margin实现居中
- Css Margin 实现页面居中
- margin:0 auto;无法居中
- margin:0 auto; 居中问题
- 居中解析margin:0 auto;
- margin:0 auto; 居中问题
- margin:0 auto; 居中问题
- margin auto position 居中问题
- CSS之关于MARGIN居中
- Button margin:auto 不居中
- oracle复制表数据,复制表结构
- Winform TextBox中只能输入数字的几种常用方法(C#)
- 使用org.apache.commons.net.ftp包开发FTP客户端,实现进度汇报,实现断点续传,中文支持
- Oracle用户被锁的原因以及解决办法
- android:ellipsize省略文字用法
- 使用margin居中常见问题
- Windows 7 安装 Rational Rose 启动报错:无法启动此程序,因为计算机中丢失 suite objects.dll。
- [Cocos2d游戏开发之四] 独自收集Cocos2d提供的字体!共57种(有对照的字体图)
- C# 对 Windows 窗体控件进行线程安全调用
- Oracle 用户自动被锁解决方法
- 家用路由器技术深入剖解
- 桨声轻柔,水波荡漾
- 获取手机中已安装apk文件信息(PackageInfo、ResolveInfo)(应用图片、应用名、包名等)
- windows server 2008 R2 版本的选择