CSS - jezik kaskadnih listova stila. Stara tehnologija koja se pojavila na samom početku WEB-a, danas se aktivno razvija i omogućuje vam rješavanje mnogih zadataka za koje ste prethodno morali koristiti javascript, izvornim sredstvima. Ali u nekim slučajevima još uvijek imamo slabosti CSS-a. Blok-centriran blok - takav trivijalni zadatak i dalje je aktualno pitanje za svakoga tko još uvijek razumije osnove web razvoja. S pojavom tehnologije Flexbox i Grid Layout, ovaj zadatak je postao mnogo lakši, ali ne i svi preglednici i za istu verziju IE 9 će morati tražiti druga rješenja. Dakle, razmotrimo glavne načine usklađivanja blokova u CSS-u.
Horizontalno poravnanje, ili Kako postaviti blok u CSS u središtu
Najlakši način da se blok postavi u horizontalnu ravninu, ovdje je nekoliko jednostavnih i sofisticiranih rješenja. Prvi je način koristiti marginu svojstva, koja je odgovorna za vanjske uvlake i omogućuje vam da poravnate blok u središtu. CSS vam omogućuje da to učinite vrlo graciozno. Važno je ne miješati ga sa svojstvom paddinga, što vam omogućuje da postavite interne alineje s bilo koje strane bloka, "gurajući" iz sadržaja granice i stvaranjem slobodnog prostora između njih. Drugi način je da koristite tekstualno poravnanje: svojstvo centra ako je blok postavljen da prikaže ili inline ili display: inline-block.
Automatsko ponavljanje pokušaja udesno i lijevo preko margine: 0 auto
Svojstvo margine omogućuje učinkovitomjesto u CSS bloku u sredini roditeljskog bloka, to jest, prikladno je za slučajeve gdje svaka stavka ima svojstvo display: block. Samo odredite marginu: 0 auto; u CSS datoteci ili koristite atribut stila u HTML kodu. Dekodirati sadržaj ovog parametra:
0 - označava odsutnost vanjskih uvlake od vrha i dna elementa;
Automatski kaže pregledniku da samostalno izračunava udubine na desnoj i lijevoj strani, definirajući slobodni prostor sa strane i distribuirajući ga jednako na svakoj strani bloka.
Ako je sve učinjeno ispravno, tada pri postavljanju marže svojstva: 0 auto; U CSS-u, blok u središtu bloka će automatski. Možete pitati razumno pitanje: "Zašto ne mogu staviti marginu: auto auto, niveliranje jedinice čak i vertikalno?" Nažalost, ova opcija neće raditi zbog značajke blokovskog modela, kao što je vertikalni kolaps vanjskog udubljenja.
Što učiniti ako se bloku daje ponašanje niza?
Kao što smo već spomenuli, jedna od ključnih značajki CSS-a je da se svaki blok može postaviti na jedan od nekoliko obrazaca ponašanja. Iznad smo razmatrali slučaj kada je stavka blok ne samo po izgledu, već iu odnosu "u potoku", s drugim elementima na stranici. Sada ćemo razmotriti slučaj kada je objektu dan red (prikaz: inline) ili prikaz: inline-block. I u prvom, iu drugom slučaju, uočit će svojstva koja upravljaju ponašanjem teksta na stranici. A za poravnanje bloka u središtu CSS-a pomoći ćemo parametru text-align: center, koji vam omogućuje rješavanjezadatak bez poteškoća. Jednostavno ga stavimo na roditeljsku jedinicu, a naš element automatski postaje točno u sredini u horizontalnoj ravnini. Na druga slična svojstva, kao što je vertikalno poravnavanje: sredina, utjecat će to, za vertikalno poravnanje teksta.
Elegantni CSS: koristite položaj svojstva: apsolutno
U CSS-u, poravnanje bloka u središtu moguće je i uz pomoć apsolutnog pozicioniranja. Za poravnavanje elemenata na nestandardan način najčešće se koriste pozicije: relativna svojstva, što vam omogućuje da ih pomičete u bilo kojem smjeru, uz očuvanje izvornog mjesta na stranici, i kroz položaj: apsolutni, potpuno "izvlačeći" element iz toka i idealno prilagođen poziciji CSS jedinica u središtu bloka u vertikalnoj ravnini. Pretpostavimo da je naš objekt visina 100px i širina od 200px, standardni pravokutnik. Da bismo ga poravnali u sredini, zamolimo ga da napusti lijevu i gornju 50% (lijevo: 50% i vrh: 50%), a zatim - negativne vanjske margine s tih strana na polovinu širine i visine bloka (margina lijevo: -100px) i gore: -50px). Detaljnije razjasnite ovaj trenutak.
Lijevo i desno svojstvo s vrijednosti od 50% uzimaju element u lijevi gornji kut i smještaju ga u CSS blok u središtu roditeljskog bloka. Ali to nije sve. U ovom trenutku, u CSS-u, poravnanje bloka u centru još se ne može nazvati preciznim, jer je centar sada samo gornji kut elementa. Da biste postigli najbolji rezultat, moramo pomicati element natrag na polovicu širine i visine, koristeći odgovarajućivertikalne alineje ili složenije svojstvo transformacije: translate (-50%, -50%) koje obavlja istu funkciju. Sada se blok nalazi točno točno. U zaključku napominjemo da se problem može riješiti uz pomoć Flexbox tehnologije, ali je dizajniran za napredne korisnike i ne radi u svim preglednicima.
