【转】margin:auto 居中 -

roc08

浏览: 227997 次
性别:
来自: 北京

最近访客更多访客>>

libian339

shawbis8712

elysiumzing

xzz212

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

【转】margin:auto 居中

博客分类：

html margin 居中

转载文章，非原创，原文：
http://blog.csdn.net/maopop/article/details/4956763
margin:auto 解释

解析margin的自动值auto
auto自动是字面的意思
定义一个方向为auto，可以理解为此方向随便，自由
以前不是有个经典的FF居中么 margin:0 auto，这个其实在IE6下支持也是很好的，于是也有了如下延伸：

居中 margin:0 auto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Untitled Document</title> </head> <body> <div style="height:300px; background:#ccc;"> <div style="width:50px; height:50px; background:#f00; margin:0 auto;"></div> </div> </body> </html>

居左 margin:0 auto 0 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Untitled Document</title> </head> <body> <div style="height:300px; background:#ccc;"> <div style="width:50px; height:50px; background:#f00; margin:0 auto 0 0;"></div> </div> </body> </html>

居右 margin:0 0 0 auto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Untitled Document</title> </head> <body> <div style="height:300px; background:#ccc;"> <div style="width:50px; height:50px; background:#f00; margin:0 0 0 auto;"></div> </div> </body> </html>

注意：没有上或者下方向的auto
此应用一定程度上可以代替float，而且更方便，兼容更好
例：margin: 15px auto;
上下边距为15PX 左右自动
margin:auto;
表示上下左右都自动
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。

分享到：