自动在保证金中做什么:0自动?

时间:2010-07-03 08:02:59

标签: css

automargin:0 auto;中做了什么?

我似乎无法理解auto的作用。我知道它有时会产生居中对象的效果。感谢。

7 个答案:

答案 0 :(得分:155)

如果在已应用width的对象上指定了margin: 0 auto,则该对象将集中在其父容器中。

指定auto作为第二个参数基本上告诉浏览器自动确定左边距和右边距,它通过设置它们来做同样的事情。它保证左右边距将设置为相同的大小。第一个参数0表示顶部和底部边距都将设置为0。

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

因此,为了给你一个示例,如果父级是100px且子级是50px,那么auto属性将确定在{{之间共享50px的可用空间1}}和margin-left

margin-right

哪会给:

var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;

看看这个jsFiddle。您不必指定父宽度,只需指定子对象的宽度。

答案 1 :(得分:10)

auto:浏览器设置边距。结果取决于浏览器

保证金:0自动指定

* top and bottom margins are 0
* right and left margins are auto

答案 2 :(得分:8)

来自Calculating widths and margins for Block-level, non-replaced elements in normal flow的CSS规范:

  

如果'margin-left'和'margin-right'都是'auto',则它们的使用值相等。这使元素相对于包含块的边缘水平居中。

答案 3 :(得分:3)

margin:0 auto;

0用于上下,auto用于左下角。这意味着左边距和右边距将根据元素的宽度和容器的宽度来获取自动边距。

通常,如果您想将任何元素放在中心位置,那么margin:auto就能完美地运作。但它只适用于块元素。

答案 4 :(得分:1)

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

0表示上下,自动表示左右。 浏览器设置边距。

答案 5 :(得分:1)

通过对这两个值如何工作的一些解释将变得更加清晰。

margin属性是以下内容的简写:

margin-top
margin-right
margin-bottom
margin-left

那为什么只有两个值?

好吧,您可以使用以下四个值来表示边距:

margin: 10px, 20px, 15px, 5px;

表示顶部10像素,右侧20像素,底部15像素,左侧5像素

同样,您也可以使用两个值来表示:

margin: 20px 10px;

这将为您提供20px上下的边距和10px左右的边距。

如果您设置了:

margin: 20px auto;

这意味着上边距和下边距为20px,自动边距为左右。而auto表示根据容器自动设置左右边距。如果您的元素是块型元素,则意味着它是一个盒子并且占据了视图的整个宽度,然后自动将左右边距设置为相同,从而使元素居中。

答案 6 :(得分:-1)

替换“中心”标签非常麻烦/很难。当您需要残破的表格并且需要居中放置块和文本时,它会派上用场。