转载文章,非原创,原文:
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;
表示上下左右都自动
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。
如果只提供一个,将用于全部的四边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。
分享到:
相关推荐
下面是一个示例代码,展示了如何使用`margin:auto`使`table`居中: ```html <div style="text-align:center"> <table border="1" cellpadding="3" cellspacing="0" style="width: 60%; margin:auto;"> <td></td...
在CSS布局中,水平居中是一种常见的需求,而`margin: 0 auto`是一个常用的实现方式。这个样式声明表示元素的上下外边距为0,左右外边距自动调整,以此来达到在父容器内水平居中的效果。然而,很多初学者在尝试使用...
一种常见的解决方案是在`body`标签中添加类名,并在CSS中定义`text-align: center`,以确保内容在所有浏览器中都能居中: ```css body.index { text-align: center; } ``` 然后,对于需要居中的元素,可以使用...
很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其实就是~~水平居中的意思,呵呵!小...
`margin: 0px auto` 是一个经常被用来实现水平居中的CSS属性组合,它适用于块级元素,通过设置左右外边距为自动来达到居中效果。然而,在某些情况下,尤其是在IE浏览器中,这种方法可能无法正常工作。本篇文章将深入...
总结来说,通过text-align属性可以简单地实现内联元素或内联块级元素的水平居中,而要实现块级元素的居中,则需要使用margin: 0 auto;方法,并确保块级元素具有宽度属性。这两种方法都是CSS布局中的基础技术,非常...
本文将深入探讨在Internet Explorer(IE)浏览器中,为何`margin: 0 auto;`在某些情况下无法使块级元素水平居中,并提供解决方案。 首先,`margin: 0 auto;`这个CSS声明通常用于使具有固定宽度的块级元素在容器内...
首先,`margin: 0 auto`是CSS中的一种居中对齐方法,它将元素的上下边距设置为0,左右边距自动分配,以使元素在容器内水平居中。但这种方法有时在某些浏览器中可能不起作用,特别是当HTML文档类型定义(DOCTYPE)...
本文将详细介绍居中方式的实现方法,包括绝对定位、flex布局、margin:auto等多种方法。 一、 绝对定位的盒子居中 在CSS中,我们可以使用绝对定位来实现盒子的居中。下面是一个简单的示例代码: ```css div { ...
复制代码代码如下: XHTML CODE: ”layout”>一列固定宽度居中</div> CSS CODE: 复制代码代码如下: #layout{ background-color:#C7E091; border:2px solid #B0BCA6;... margin:0px auto;/*外边距参数*/ }
- `margin: auto`:当元素的宽度设置为固定值时,`margin: auto`可以使其在父容器中水平居中。 2. **水平居中**: 对于水平居中,我们可以简单地为`div`设置`margin: 0 auto`。这将自动分配左右外边距,使元素在...
(意思是:上下边界为0,左右根据宽度自适应)可以让div等块级元素达到居中的效果,但是往往我们发现虽然我们已经加入margin:0 auto;却仍然没有实现居中。 这往往是由以下两种常见原因引起的: 1、没有设置宽度 2、没...
一种解决方案是通过设置`body`的`text-align`属性为`center`,这将使得所有内部文本内容居中,包括设置了`margin: 0 auto;`的元素: ```css body { text-align: center; } #cnbruce { width: 500px; background...
通常,我们有两种主要的方法来实现元素的水平居中:`text-align:center` 和 `margin: auto`。这篇文章将重点讨论如何在Internet Explorer (IE)浏览器中使用`margin: auto`实现居中对齐,以及为什么在某些情况下IE...