在自动做什么margin：0 auto？ [英] What does auto do in margin:0 auto?

问题描述

auto 在 margin：0 auto; 吗？

我似乎不明白 auto 是什么。我知道它有时有一个对中心的效果。感谢。

I can't seem to understand what auto does. I know it sometimes has an effect of centering objects. Thanks.

推荐答案

在对象上指定 width 您已将 margin：0 auto 应用到对象将集中在其父容器中。

When you have specified a width on the object that you have applied margin: 0 auto to, the object will sit centrally within it's parent container.

指定 auto 作为第二个参数基本上告诉浏览器自动确定左边距和右边距本身，这是通过设置它们平等。它保证左边距和右边距将设置为相同的大小。第一个参数0表示顶部和底部边距都将设置为0.

Specifying auto as the second parameter basically tells the browser to automatically determine the left and right margins itself, which it does by setting them equally. It guarantees that the left and right margins will be set to the same size. The first parameter 0 indicates that the top and bottom margins will both be set to 0.

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

因此，为了给您一个示例子元素为50像素，则 auto 属性将确定在 margin-left 之间有50像素的可用空间 margin-right ：

Therefore, to give you an example, if the parent is 100px and the child is 50px, then the auto property will determine that there's 50px of free space to share between margin-left and margin-right:

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

这将给予：

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

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

Have a look at this jsFiddle. You do not have to specify the parent width, only the width of the child object.

这篇关于在自动做什么margin：0 auto？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！