Что делает auto в поле: 0 auto?

Question

Что auto делает в margin:0 auto;?

Кажется, я не понимаю, что делает auto.Я знаю, что это иногда имеет эффект центрирования объектов.Спасибо.

Answer 1

Когда вы указали width для объекта, к которому вы применили margin: 0 auto, объект будет находиться в центре его родительского контейнера.

Указание auto в качестве второго параметра в основном указывает браузеру автоматически определять левое и правое поля, что он делает, устанавливая их одинаково. Это гарантирует, что левые и правые поля будут одинакового размера. Первый параметр 0 указывает, что верхнее и нижнее поля будут оба равны 0.

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

Поэтому, чтобы дать вам пример , если родительский элемент - 100px, а дочерний - 50px, то свойство auto будет определять, что есть 50px свободного пространства для совместного использования между margin-left и margin-right * * 1014

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

Что даст:

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

Взгляните на это jsFiddle . Вам не нужно указывать родительскую ширину, только ширину дочернего объекта.

Answer 2

авто: браузер устанавливает поле. Результат этого зависит от браузера

поле: 0 автоматически указывает

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

Answer 3

Из спецификации CSS на Расчет ширины и полей для незаменяемых элементов на уровне блоков в нормальном потоке :

Если и 'margin-left', и 'margin-right 'are' auto ', их используемые значения равны.Это горизонтально центрирует элемент относительно краев содержащего блока.

Answer 4

margin:0 auto;

0 для верхнего-нижнего и auto для левого-правого. Это означает, что левое и правое поле будет автоматически заполнено в соответствии с шириной элемента и шириной контейнера.

Обычно, если вы хотите поместить какой-либо элемент в центральное положение, margin:auto работает отлично. Но это работает только в элементах блока.

Answer 5

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

0 для верхнего-нижнего и автоматический для левого-правого.Браузер устанавливает поля.

Answer 6

Это сломанная / очень трудная в использовании замена тега "center". Это удобно, когда вам нужны разбитые таблицы и нерабочее центрирование для блоков и текста.