Що робить авто в поле: 0 авто?

126

Що autoробити в margin:0 auto;?

Я не можу зрозуміти, що autoробить. Я знаю, що іноді впливає на центрування об'єктів. Дякую.

css

189

Коли ви вказали 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:

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

Що б дало:

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

Погляньте на цей jsFiddle . Не потрібно вказувати батьківську ширину, лише ширину дочірнього об'єкта.

— djdd87
джерело

але ми ніколи не визначимо будь-яку ширину bodyі ми завжди даємо widthі margin:0 autoдо#wrapper

— Jitendra Віас

нормально, тоді межа між тілом та об'єктом буде розрахована браузером автоматично.

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

Чи є якесь подібне значення в %? Я маю на увазі, чи є в CSS якесь інше властивість, яке може дати такий же результат, як лівий і правийauto

— Jitendra Vyas

@GenericTypeTea - і що відбувається за margin:auto 0умови?

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

Однак чому я використовую маржу: 20 авто впливає на ліво-праве позиціонування? Здавалося б, все, що я робив, було додавати верхню / нижню маржу ...

— pitosalas

13

auto: браузер встановлює маржу. Результат цього залежить від браузера

маржа: 0 автоматично вказує

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

— гомілка
джерело

9

З специфікації CSS щодо обчислення ширини та меж для блокового рівня, незамінені елементи в нормальному потоці :

Якщо і "margin-left", і "margin-right" є "auto", використовувані значення їх рівні. Це горизонтально центрує елемент відносно країв блоку, що містить.

— Гамбо
джерело

"використані значення їх рівні", що означає це?

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

3

@ metal-gear-solid - якщо ширина батьків (визначається веб-переглядачем або вказаною шириною) становить 100 пікселів, а ширина дітового дива - 50 пікселів. Тоді маржа: 0 автоматично визначить, що є 50 пікселів доступного місця. Потім це розділиться на 2, даючи 25. Лівий і правий край встановлюються тоді, як 25, тобто значення встановлюються однаково.

— djdd87

1

Використовувані значення відносяться до фактично використаних значень залежно від фактичних візуальних властивостей елемента, який використовує це властивість, та його блоку, що містить його. Зв'язаний розділ має формулу, яка використовується для обчислення горизонтальної різниці між елементом та його блоком, що містить його. Потім цю різницю випльовують порівну і використовують як фактичні значення горизонтальних границь.

— Gumbo

6

margin:0 auto;

0- зверху вниз і autoдля ліворуч праворуч. Це означає, що лівий і правий запас прийматимуть автоматичний запас відповідно до ширини елемента та ширини контейнера.

Як правило, якщо ви хочете поставити будь-який елемент в центрі положення, то це margin:autoпрацює чудово. Але він працює лише в блокових елементах.

— користувач3237573
джерело

1

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

0 - вгорі-вниз, а автоматично - вліво-вправо. Браузер встановлює маржу.

— jaffer sathick
джерело

1

З деяким поясненням того, як працюють ці два значення, стає зрозуміліше.

Властивість поля є скороченим для:

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;

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

— Ангус Комбер
джерело

-3

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

— Денні
джерело