CSS - marginauto; - Как работи

Използвайки марж: автоматичен Хоризонтално центриране на блоков елемент е добре позната техника. Но някога сте се чудили защо и как работи? За да отговорим на това, първо трябва да погледнем как марж: авто работи. Също така в микса е какво Автоматичен евентуално може да направи в полетата, ако работи за вертикално центриране и няколко други проблема.

Но първо, какво прави Автоматичен всъщност?

Определението на Автоматичен варира с елементи, типове елементи и контекст. В полетата, Автоматичен може да означава една от двете неща: заемане на наличното пространство или 0 px. Тези две ще определят различни оформления за даден елемент.

"auto" Заемане на наличното пространство

Това е най-честото използване на маржа Автоматичен често се срещаме. Чрез възлагане Автоматичен отляво и отдясно на елемента, те поемат равномерно наличното хоризонтално пространство в контейнера на елемента - и по този начин елементът се центрира.

Това обаче ще работи само за хоризонтални полета (повече за защо по-късно) и също няма да работи с плаващи и вградени елементи и само по себе си не може да работи в абсолютен и фиксирани позиционирани елементи (ние обаче ще видим как да направим тези работи).

Faux Float като вземе на разположение пространство

От Автоматичен и в дясното, и в лявото поле заемат "наличното" пространство по равно, какво мислите, че ще се случи, когато стойността Автоматичен се дава само на един от тях?

Ляво или дясно поле с Автоматичен ще заемат цялото "налично" пространство, което ще направи елемента да изглежда като че ли е бил промит надясно или наляво.

“Автоматичен” Изчислено до 0px

Както вече споменахме, Автоматичен няма да работи в плаващи, инлайн и абсолютни елементи. Всички тези елементи вече имат решиха за техните оформления, така че няма полза от използването Автоматичен за границите и очаквайки да се центрира точно така.

Това ще победи първоначалната цел да се използва нещо подобно поплавък. следователно Автоматичен ще има стойност 0px в тези елементи.

Автоматичен също няма да работи с типичен блок, ако няма ширина. Всички примери, които ви показах досега, имат широчина.

Ширина на стойността Автоматичен ще има 0px маржове. Широчината на блоковия елемент обикновено покрива контейнера, когато е Автоматичен или 100% и следователно марж Автоматичен ще се изчислява на 0px в такъв случай.

Какво се случва с вертикалните полета с стойността Автоматичен?

Автоматичен в горната и долната граница винаги се изчислява до 0px (с изключение на абсолютните елементи). Спецификацията W3C казва така:

“ако “марж-отгоре” или “марж дъно” е “Автоматичен”, тяхната използвана стойност е 0 "

Защо, добре, че досега е загадка. Това може да се дължи на типичния вертикален поток на страниците, където размерът на страницата се увеличава по височина. Така че центрирането на елемент вертикално в неговия контейнер няма да го направи центрирано, по отношение на самата страница, за разлика от това, когато е направено хоризонтално (в повечето случаи).

И може би поради същата причина, те решиха да добавят изключение за абсолютните елементи, които могат да бъдат центрирани вертикално по цялата височина на страницата..

Това може да се дължи и на ефекта на срив на маржа (срив на съседни елементи” маржове), което е друго изключение за вертикалните полета.

Последният обаче изглежда е малко вероятен случай - тъй като елементите, които не свиват маржовете си - като Floats, и елементи с препълване различни от видим, все още присвоява 0px вертикални полета за Автоматичен.

Центриране на абсолютно позиционирани елементи

Тъй като има изключение за абсолютно позиционирани елементи, ние”Ще използвам Автоматичен стойността да се центрира вертикално и хоризонтално. Но преди това трябва да разберем кога ще марж: автоматичен всъщност работим така, както искаме, в абсолютно позициониран елемент.

Това е мястото, където се предлага друга спецификация на W3C:

- Ако и трите “наляво”, “широчина”, и “прав” сте “Автоматичен”: Първо настройте всички “Автоматичен” стойности за “марж-наляво” и “марж-надясно” до 0… "

- Ако никой от трите не е “Автоматичен”: Ако и двете “марж-наляво” и “марж-надясно” сте “Автоматичен”, решаване на уравнението под допълнителното ограничение, че двете граници да имат равни стойности "

За това почти се казва хоризонтален Автоматичен маржове да се възползват от равни пространства стойности за наляво, широчина и прав не трябва да бъде Автоматичен , стойността им по подразбиране. Така че всичко, което трябва да направим, е да им дадем някаква стойност в абсолютно позициониран елемент. наляво и прав трябва да има равни стойности за перфектно центриране.

Спецификацията също така споменава нещо подобно за вертикалните полета.

“Ако и трите “връх”, “височина”, и “дъно” са автоматично зададени “връх” към статичното положение… ”

“Ако никой от трите не е “Автоматичен”: Ако и двете “марж-отгоре” и “марж дъно” сте “Автоматичен”, решаване на уравнението под допълнителното ограничение, че двете граници да имат равни стойности ... ”

Следователно, за да бъде абсолютен елемент центрирано вертикално, негов връх, височина, и дъно стойностите не трябва да бъдат Автоматичен.

Сега, като комбинираме всичко това, това е, което ние”ще получа:

заключение

Ако някога искате да изтриете елемент от страницата си надясно или наляво, без да го опаковате със следните елементи (като какво се случва с float), не забравяйте, че има опция за използване Автоматичен за маржове.

Конвертирането на даден елемент в абсолютен просто така, че да може да бъде центрирано вертикално, може да не е добра идея. Има и други опции като flexbox и CSS transform, които са по-подходящи за тях.