`
roc08
  • 浏览: 224422 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

【转】margin:auto 居中

    博客分类:
  • css
阅读更多
转载文章,非原创,原文:
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;
表示上下左右都自动
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。
如果只提供一个,将用于全部的四边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。
分享到:
评论

相关推荐

    通过css属性margin:auto让Div中的Table居中

    在div标签中加入text-align:center里面的Table是不会居中的,在Table中加上 margin:auto就可以实现居中效果,下面有个示例,大家可以参考下

    无法居中,margin:0 auto;属性

    很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其实就是~~水平居中的意思,呵呵!小...

    css中margin:0 auto居中问题深入探讨

    很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其实就是~~水平居中的意思,呵呵!小...

    div使用margin:0px auto不居中的原因分析及解决

    复制代码代码如下: ”cnbruce”&gt;margin: 0 auto 看看内容居中否&lt;/div&gt; 如上调试结果,IE6.0是不居中的,当然解决的办法可以是对网页主体“&lt;body&gt;”声明文本居中,即 复制代码代码如下: &lt;style&gt; body{...

    CSS中使用text-align、margin:0 auto居中的示例代码

    CSS中使用text-align、margin:0 auto居中

    css margin:0 auto居中

    复制一下代码到记事本,修改为html后缀的文件。 代码 &lt;html xmlns=”http://www.w3.org/1999/xhtml”&gt; &lt;head&gt; &lt;meta http-equiv=”Content-Type” content=... charset=utf-8″ /&gt;... margin:0 auto;

    通过margin:0px auto来实现一列固定宽度居中

    复制代码代码如下: XHTML CODE: ”layout”&gt;一列固定宽度居中&lt;/div&gt; CSS CODE: 复制代码代码如下: #layout{ background-color:#C7E091; border:2px solid #B0BCA6;... margin:0px auto;/*外边距参数*/ }

    html中使用margin:0 auto整个页面不居中的解决方法

    div style=margin:0 auto这个属怎么弄都不能让页面居中展示,原因是L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档

    在IE下,当margin:0 auto;无法使得块级元素水平居中时

    今天遇到使用一个,div元素使用了以下样式 ... margin:0 auto;} 在火狐下此div水平居中,但在IE下不居中。 原因是,此div的父级元素没有使用以下样式 div.wrap_parent{text-align:center;} 特此记录

    Div使用margin居中常见问题

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

    ie css margin auto 不居中解决方案

    一般在将div居中显示时,使用css: divX {margin:0 auto;} 此css在firefox下是好的,但是在ie下不起作用,网上看到原因如下: &lt;div id=cnbruce&gt;margin: 0 auto 看看内容居中否&lt;/div&gt; 如上调试结果,IE6.0是不居中的...

    ie下margin不居中的三种解决方法

    正常情况下需要将div居中显示时,使用Css样式:margin:0 auto即可,但有时使用margin:0 auto后在FF、Chrome里能居中,而在IE678里不居中的现象。 如下代码: 复制代码代码如下:&lt;style type=”text/css”&gt;#con{...

    CSS网页布局DIV水平居中的各种方法

    一、margin:auto 0 #wrap { margin:0 auto;} 上面这段代码的意思是说使wrap这个div到左右两侧的距离自动设置,上下为0(可以为任意)。 二、相对定位与负的边距 #wrap { position:relative; width:760px; left...

    CSS 将两个button按钮垂直+水平居中

    但是因为它有固定高度,其实并不能和上下都间距为 0,因此 margin:auto; 会使它居中。使用 **margin:auto;**使块级元素垂直居中是很简单的。 .vert-center{ position:absolute; top:0; bottom:0; left: 0; ...

Global site tag (gtag.js) - Google Analytics