CSS - język kaskadowych arkuszy stylów. Stara technologia, która pojawiła się u zarania WEB, dzisiaj aktywnie rozwija się i pozwala rozwiązać wiele zadań, do których wcześniej potrzebowałeś javascript, natywnymi metodami. Ale w niektórych przypadkach wciąż odczuwamy słabość CSS. Blok skoncentrowany na blokach - takie banalne zadanie wciąż pozostaje aktualnym problemem dla każdego, kto wciąż rozumie podstawy tworzenia stron internetowych. Wraz z pojawieniem się technologii Flexbox i Grid Layout zadanie to stało się znacznie łatwiejsze, ale nie we wszystkich przeglądarkach iw tej samej wersji IE 9 będzie trzeba szukać innych rozwiązań. Rozważmy więc główne sposoby wyrównania bloków w CSS.
Wyrównanie w poziomie lub Jak umieścić blok w CSS w środku
Najprostszym sposobem wyśrodkowania bloku w płaszczyźnie poziomej jest kilka prostych i wyrafinowanych rozwiązań. Pierwszym sposobem jest użycie marginesu właściwości, który jest odpowiedzialny za wcięcia zewnętrzne i pozwala wyrównać blok w środku. CSS pozwala to zrobić bardzo wdzięcznie. Ważne jest, aby nie mylić go z właściwością padding, która pozwala ustawić wewnętrzne wcięcia z każdej strony bloku, "pchając" z zawartości granicy i tworząc wolną przestrzeń między nimi. Drugi sposób polega na użyciu właściwości text-align: center, jeśli blok jest ustawiony do wyświetlania inline lub display: inline-block.
Automatyczne powtarzanie w prawo i w lewo przez margines: 0 auto
Właściwość marginesu pozwala na skuteczneumieść w bloku CSS w środku bloku nadrzędnego, to znaczy, że jest odpowiedni dla przypadków, w których każdy element ma właściwość display: block. Po prostu określ margines: 0 auto; w pliku CSS lub użyj atrybutu stylu w kodzie HTML. Dekodowanie zawartości tego parametru:
0 - oznacza brak zewnętrznych wcięć z góry i dołu elementu;
Auto mówi przeglądarce, że niezależnie oblicza wcięcia na prawo i lewo, określając wolną przestrzeń po bokach i równomiernie rozkładając ją po każdej stronie bloku.
Jeśli wszystko zostanie wykonane poprawnie, to przy ustawianiu marginesu właściwości: 0 auto; W CSS, blok w środku bloku będzie automatycznie. Możesz zadać sensowne pytanie: "Dlaczego nie mogę umieścić marginesu: auto auto, wyrównując jednostkę nawet pionowo?" Niestety ta opcja nie działa z powodu funkcji modelu blokowego, na przykład pionowego zwinięcia zewnętrznego wcięcia.
Co zrobić, jeśli blok otrzymuje zachowanie ciągowe?
Jak omówiliśmy powyżej, jedną z kluczowych cech CSS jest to, że każdy blok może być ustawiony na jeden z kilku wzorców zachowań. Powyżej rozważaliśmy przypadek, gdy przedmiot jest blokiem nie tylko w wyglądzie, ale także w relacji "w strumieniu", z innymi elementami na stronie. Teraz rozważymy przypadek, gdy obiekt otrzyma linię (display: inline) lub display: inline-block. I w pierwszym, a w drugim przypadku, dostrzeże właściwości, które regulują zachowanie tekstu na stronie. Aby wyrównać blok w środku CSS pomożemy parametrowi text-align: center, który pozwoli ci rozwiązaćzadanie bez żadnych trudności. Po prostu umieszczamy go w jednostce rodzica, a nasz element automatycznie staje się dokładnie pośrodku w płaszczyźnie poziomej. Inne podobne właściwości, takie jak vertical-align: middle, będą pod wpływem tego, aby uzyskać pionowe wyrównanie tekstu.
, Zaawansowana CSS użyciu pozycji właściwość: bezwzględne
, w CSS bloku wyrównania w środku, jak to możliwe, a w absolutnym pozycjonowania. Wyrównania elementów niekonwencjonalne Najpowszechniejszą metodą pozycji właściwości: względny, co pozwala na poruszanie się w dowolnym kierunku, przy zachowaniu oryginalnej lokalizacji na stronie, a położeniem: absolutny całkowicie „vыrыvayuschee” element ze strumienia i jest idealny do zlokalizowania w Jednostka CSS na środku bloku w płaszczyźnie pionowej. Załóżmy, że nasz obiekt ma wysokość 100 pikseli i szerokość 200 pikseli, standardowy prostokąt. Aby wyrównać swoje centrum, możemy zadać mu wcięcia z lewej i górnej 50% (po lewej: 50% top: 50%), a po - negatywny dopełnienie zewnętrznego tych partii o połowę szerokości i wysokości bloku (margin-left: -100px i do góry: -50 pikseli). Wyjaśnij ten moment bardziej szczegółowo.
Właściwości w lewo lub w prawo, o wartości 50% elementem górnym lewym rogu „wziąć” i umieszczony w bloku CSS w środku bloku rodzica. Ale to nie wszystko. Obecnie w CSS bloku wyrównania w środku nie być uznane za dokładne, ponieważ ośrodek znajduje się tylko górny róg elementu. Aby osiągnąć najlepszy wynik, musimy przenieść element z powrotem na połowę szerokości i wysokości, używając odpowiednichpionowe wcięcia lub bardziej złożona własność transformacji: translate (-50%, -50%), które wykonują tę samą funkcję. Teraz blok znajduje się idealnie dokładnie. Podsumowując, zauważamy, że problem można rozwiązać za pomocą technologii Flexbox, ale jest on przeznaczony dla zaawansowanych użytkowników i nie działa we wszystkich przeglądarkach.
