ЦСС - маргинауто; - Како то ради

Користећи маргин: ауто да центрира блок елемент хоризонтално је добро позната техника. Али да ли сте се икада запитали зашто или како то ради? Да бисмо одговорили на ово, прво морамо погледати како маргина: ауто ради. Такође у миксу је шта ауто Могуће је направити маргине, ако ради за вертикално центрирање, и неколико других питања.

Али прво, шта има ауто заправо?

Дефиниција ауто варира са елементи, типови елемената и контекст. Ин маргинс, ауто може значити једну од двије ствари: заузети расположиви простор или 0 пк. Ове две ће дефинишите различите изгледе за елемент.

"ауто" Такинг Уп Аваилабле Спаце

Ово је најчешћа употреба маргине ауто често долазимо. Би ассигнинг ауто на леву и десну маргину елемента, једнако заузимају расположиви хоризонтални простор у контејнеру елемента - и тако се елемент центрира.

Међутим, ово ће радити само за хоризонталне маргине (више о зашто касније), и то такође неће радити са плутајућим и инлине елементс и сам по себи, такође не може радити у апсолутно и фиксно позиционирани елементи (ипак ћемо видети како да направимо те радове).

Фаук Флоат узимањем расположивог простора

Од ауто и на десној и на левој маргини подједнако заузимају "расположиви" простор, што мислите да ће се десити када вредност буде ауто даје само један од њих?

Лева или десна маргина са ауто ће заузети све "расположиве" просторе чинећи елемент изгледа као да је испран у десно или лево.

“ауто” Израчунато на 0пк

Као што је поменуто раније, ауто неће радити у плутајућим, инлине и апсолутним елементима. Сви ови елементи већ имају одлучили су се за њихов распоред, тако да нема користи од употребе ауто за маргине и очекујући да се среди баш тако.

То ће поразити почетну сврху употребе нечега сличног пловак. Стога ауто ће имати вредност 0пк у тим елементима.

ауто такође неће радити на типичном елементу блока ако нема ширину. Сви примјери које сам до сада показао имају ширину.

Ширина вредности ауто ће имати 0пк маргине. Ширина елемента блока обично покрива његов садржај када је он ауто или 100% и стога маргина ауто ће бити израчунато на 0пк у том случају.

Шта се дешава са вертикалним маржама са вредношћу ауто?

ауто у горњој и доњој маргини се увек израчунава на 0пк (осим апсолутних елемената). Спецификација В3Ц каже:

“Ако “маргин-топ” или “маргин-боттом” је “ауто”, њихова вредност је 0 "

Зашто, па то је до сада, мистерија. Може бити због типичног вертикалног тока странице, гдје величина странице се повећава по висини. Дакле, центрирање елемента вертикално у његовом контејнеру неће га учинити центрираним, у односу на саму страницу, за разлику од када се ради хоризонтално (у већини случајева).

И можда због истог разлога, одлучили су да додају изузетак за апсолутне елементе који се могу центрирати вертикално дуж висине целе странице..

Може бити и због ефекта колапса маргине (колапс сусједних елемената” маргине) што је још један изузетак за вертикалне маргине.

Међутим, чини се да је последњи случај мало вероватан - пошто елементи који не сруше њихове маргине - као што су Флоатс и елементи са оверфлов осим видљиво, и даље додељује 0пк вертикалне маргине за ауто.

Центрирање апсолутно позиционираних елемената

Будући да постоји изузетак за апсолутно позициониране елементе, ми”лл усе ауто вредност центрирати вертикално и хоризонтално. Али пре тога, морамо да сазнамо када ћемо маргин: ауто заправо ради као што желимо у апсолутно позиционираном елементу.

Овде долази још једна В3Ц спецификација:

"Ако сва тројица." “лево”, “видтх”, и “јел тако” су “ауто”: Први сет било “ауто” валуес фор “маргин-лефт” и “маргин-ригхт” до 0… "

"Ако ниједна од ове три није." “ауто”: Ако обоје “маргин-лефт” и “маргин-ригхт” су “ауто”, ријешити једнаџбу под додатним ограничењем да двије маргине добију једнаке вриједности "

То углавном говори хоризонтал ауто маргине да се ухвате једнаки простори валуес фор лево, видтх и јел тако не би требало да буде ауто , њихове подразумеване вредности. Дакле, све што треба да урадимо је да им дамо неку вредност у апсолутно позиционираном елементу. лево и јел тако требало је једнаке вредности за савршено центрирање.

Спецификација такође помиње нешто слично за вертикалне маргине.

“Ако све три “топ”, “хеигхт”, и “дно” су ауто, сет “топ” на статичну позицију ... ”

“Ако ниједна од ове три није “ауто”: Ако обоје “маргин-топ” и “маргин-боттом” су “ауто”, ријешити једнаџбу под додатним ограничењем да двије маргине добију једнаке вриједности ... ”

Дакле, за апсолутни елемент центрирано вертикално, његово топ, хеигхт, и дно вредности не би требало да буду ауто.

Сада, комбиновањем свих ових, то је оно што ми”лл гет:

Закључак

Ако икада желите да испразните елемент на страници десно или лево, а да га следећи елементи не омотају (као што се дешава са флоат-ом), запамтите да постоји опција за употребу ауто фор маргинс.

Претварање елемента у апсолутни само тако да се може центрирати вертикално, можда није добра идеја. Постоје и друге опције као што су флекбок и ЦСС трансформација које су погодније за њих.