CSS - marginauto; - Jak to działa

Za pomocą margin: auto wyśrodkowanie elementu blokowego poziomo jest dobrze znaną techniką. Ale czy kiedykolwiek zastanawiałeś się, dlaczego lub jak działa? Aby odpowiedzieć na to pytanie, najpierw musimy przyjrzeć się, jak margines: działa automatycznie. Również w miksie jest co automatyczny może to robić na marginesach, jeśli działa dla centrowania pionowego, i kilka innych problemów.

Ale najpierw, co robi automatyczny właściwie to zrobić?

Definicja automatyczny zależy od elementy, typy elementów i kontekst. W marginesach, automatyczny może oznaczać jedną z dwóch rzeczy: zająć dostępną przestrzeń lub 0 px. Te dwie woli zdefiniuj różne układy dla elementu.

„auto” zajmowanie dostępnej przestrzeni

Jest to najpowszechniejsze wykorzystanie marginesu automatyczny spotykamy się często. Przez przypisanie automatyczny na lewy i prawy margines elementu, równomiernie zajmują dostępną przestrzeń poziomą w pojemniku elementu - i w ten sposób element jest wyśrodkowany.

Jednak będzie to działać tylko dla marginesów poziomych (więcej na temat czemu później), a także nie będzie działać z floatem i elementy inline i sam z siebie nie mogę pracować w absolutny i naprawione elementy pozycjonowane (zobaczymy jednak, jak to zrobić).

Faux Float, zabierając dostępną przestrzeń

Od automatyczny zarówno na prawym, jak i lewym marginesie równomiernie zajmują „dostępną” przestrzeń automatyczny jest przyznawany tylko jednemu z nich?

Lewy lub prawy margines przy pomocy automatyczny zajmie całą „dostępną” przestrzeń, dzięki czemu element będzie wyglądał tak, jakby został opróżniony w prawo lub w lewo.

“automatyczny” Obliczono na 0px

Jak wspomniano wcześniej, automatyczny nie będzie działać w elementach pływających, liniowych i absolutnych. Wszystkie te elementy już mają zdecydowałem się na ich układy, więc nie ma sensu używać automatyczny dla marginesów i oczekując, że będzie tak wyśrodkowany.

To pokona początkowy cel użycia czegoś takiego pływak. Stąd automatyczny będzie miał wartość 0px w tych elementach.

automatyczny nie działa również na typowym elemencie bloku, jeśli nie ma szerokości. Wszystkie przykłady, które do tej pory pokazałem, mają szerokość.

Szerokość wartości automatyczny będzie miał 0px marże. Szerokość elementu bloku zazwyczaj pokrywa jego pojemnik, gdy jest automatyczny lub 100% a zatem margines automatyczny zostanie obliczony do 0px w takim przypadku.

Co dzieje się z pionowymi marginesami z wartością automatyczny?

automatyczny w obu górnych i dolnych marginesach jest zawsze obliczany do 0px (z wyjątkiem elementów absolutnych). Specyfikacja W3C mówi tak:

“Jeśli “margines górny” lub “margines dolny” jest “automatyczny”, ich wartość wynosi 0 ”

Dlaczego, cóż, jak dotąd, tajemnica. Może to wynikać z typowego przepływu strony w pionie, gdzie rozmiar strony zwiększa się w zależności od wysokości. Centrowanie elementu pionowo w kontenerze nie spowoduje, że będzie on wyśrodkowany względem samej strony, w przeciwieństwie do tego, gdy jest wykonywany poziomo (w większości przypadków).

A może z tego samego powodu postanowili dodać wyjątek dla elementów absolutnych, które można wyśrodkować w pionie na całej wysokości strony.

Może to również wynikać z efektu zapadania się marginesu (załamania sąsiednich elementów” marginesy), co stanowi kolejny wyjątek dla marginesów pionowych.

Wydaje się jednak, że ten ostatni przypadek jest mało prawdopodobny - ponieważ elementy, które nie zawalają swoich marginesów - jak Floats i elementy z przelewowy inny niż widoczny, nadal przypisuj marginesy pionowe 0px dla automatyczny.

Centrowanie absolutnie pozycjonowanych elementów

Ponieważ zdarza się wyjątek dla elementów pozycjonowanych absolutnie, my”Będę używać automatyczny wartość do środka w pionie i poziomie. Ale zanim to nastąpi, musimy się dowiedzieć, kiedy to nastąpi margin: auto faktycznie działa tak, jak chcemy, w elemencie pozycjonowanym absolutnie.

W tym miejscu pojawia się kolejna specyfikacja W3C:

„Jeśli wszystkie trzy “lewo”, “szerokość”, i “dobrze” są “automatyczny”: Najpierw ustaw dowolny “automatyczny” wartości dla “margines lewy” i “margines prawy” do 0… „

„Jeśli żaden z tych trzech nie jest “automatyczny”: Jeśli oba “margines lewy” i “margines prawy” są “automatyczny”, rozwiązać równanie pod dodatkowym ograniczeniem, że dwa marginesy otrzymują równe wartości ”

To bardzo mówi za poziomy automatyczny marże przejąć równe przestrzenie wartości dla lewo, szerokość i dobrze nie powinno być automatyczny , ich wartość domyślna. Wszystko, co musimy zrobić, to nadać im pewną wartość w elemencie pozycjonowanym absolutnie. lewo i dobrze powinien równe wartości dla idealnego centrowania.

Specyfikacja wspomina również coś podobnego dla marginesów pionowych.

“Jeśli wszystkie trzy “Top”, “wysokość”, i “Dolny” są automatyczne, ustawione “Top” do pozycji statycznej… ”

“Jeśli żaden z nich nie jest “automatyczny”: Jeśli oba “margines górny” i “margines dolny” są “automatyczny”, rozwiązać równanie pod dodatkowym ograniczeniem, że oba marginesy uzyskują równe wartości… ”

Stąd, aby był to element absolutny wyśrodkowany pionowo, jego Top, wysokość, i Dolny wartości nie powinny być automatyczny.

Łącząc to wszystko, to właśnie my”Otrzymam:

Wniosek

Jeśli kiedykolwiek chcesz opróżnić element na swojej stronie w prawo lub w lewo bez zawijania następujących elementów (np. Co dzieje się z floatem), pamiętaj, że istnieje możliwość użycia automatyczny na marginesy.

Konwersja elementu na absolutny, aby można go było wyśrodkować w pionie, może nie być dobrym pomysłem. Istnieją inne opcje, takie jak flexbox i transformacja CSS, które są bardziej odpowiednie dla tych.