自动在边距:0自动中做什么?

2022-04-16 00:00:00 css margin

automargin: 0 auto;中做了什么?

我似乎无法理解auto的作用。我知道它有时有使物体居中的效果。


解决方案

在已应用margin: 0 auto的对象上指定width后,该对象将位于其父容器的中央。

auto指定为第二个参数基本上是告诉浏览器自动确定左右边距,这是通过相等地设置它们来实现的。它保证左右边距将设置为相同的大小。第一个参数0表示上边距和下边距都将设置为0。

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

因此,举个示例,如果父对象是100px,子对象是50px,则auto属性将确定在margin-leftmargin-right之间有50px的可用空间可供共享:

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

这将提供:

margin-left: 25;
margin-right: 25;

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

相关文章