Что делает авто в марже: 0 авто?

127

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

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

css

190

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

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

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

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

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

Что даст:

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

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

— djdd87
источник

но мы никогда не определим любую ширину bodyи мы всегда даем widthи margin:0 autoк#wrapper

— Jitendra Виас

ОК, тогда маржа между телом и объектом будет рассчитана браузером автоматически.

— Jitendra Vyas

Есть ли подобное значение в %? Я имею в виду, есть ли в css какое-либо другое свойство, которое может дать такой же результат, как left и rightauto

— Джитендра Вьяс

@GenericTypeTea - а что бывает в margin:auto 0состоянии?

— Jitendra Vyas

Однако почему, когда я использую margin: 20 auto, кажется, что это влияет на позиционирование влево-вправо? Казалось бы, все, что я сделал, это добавил верхний / нижний

— отступ

13

auto: браузер устанавливает маржу. Результат зависит от браузера.

маржа: 0 автоматически указывает

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

— голень
источник

9

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

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

— гумбо
источник

«их используемые значения равны», что к этому означает?

— Jitendra Vyas

3

@ metal-gear-solid - если ширина родительского элемента (определяется браузером или указанной шириной) составляет 100 пикселей, а ширина дочернего div - 50 пикселей. Тогда margin: 0 auto определит, что доступно 50 пикселей. Затем он разделит полученное значение на 2, что даст 25. Левое и правое поля будут установлены на 25, то есть значения будут установлены одинаково.

— djdd87

1

Используемые значения относятся к фактически используемым значениям в зависимости от фактических визуальных свойств элемента, который использует это свойство, и содержащего его блока. В связанном разделе есть формула, которая используется для вычисления горизонтальной разницы между элементом и содержащим его блоком. Затем эта разница равномерно распределяется и используется в качестве фактических значений горизонтального поля.

— Gumbo

6

margin:0 auto;

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

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

— user3237573
источник

1

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

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

— Джаффер Сатик
источник

1

Это станет более ясным после некоторого объяснения того, как работают эти два значения.

Свойство поля является сокращением для:

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

Так почему же всего два значения?

Ну, вы можете выразить маржу четырьмя значениями следующим образом:

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

что будет означать 10 пикселей вверху, 20 пикселей справа, 15 пикселей внизу, 5 пикселей слева

Точно так же вы можете выразить двумя значениями, подобными этому:

margin: 20px 10px;

Это даст вам поле 20 пикселей сверху и снизу и 10 пикселей слева и справа.

И если вы установите:

margin: 20px auto;

Тогда это означает верхнее и нижнее поле в 20 пикселей, а также левое и правое поля авто. А авто означает, что левое / правое поле автоматически устанавливается в зависимости от контейнера. Если ваш элемент является элементом блочного типа, то есть он представляет собой коробку и занимает всю ширину представления, тогда автоматически устанавливается одинаковое левое и правое поле, и, следовательно, элемент центрируется.

— Ангус Комбер
источник

-3

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

— Дэнни
источник