Izrada web stranica s CSS-om. Blokiraj u središtu bloka: koliko brzo riješiti problem?

CSS je jezik kaskadnih stilskih listova. Stara tehnologija, koja se pojavila u zoru WEB-a, aktivno se razvija danas i omogućava nam da riješimo mnoge zadatke za koje je ranije upotrebljavanje jаvascript bilo izvorno.

No, u nekim trenucima i dalje osjećamo slabost CSS-a. Blokiraj u središtu bloka - takav trivijalni zadatak i dalje ostaje stvarni problem svima koji tek upoznaju osnove razvoja web stranica. S pojavom Flexbox i Grid Layout, ovaj zadatak je postao mnogo lakši, ali ih ne podržavaju svi preglednici, a IE 9 će morati tražiti druga rješenja. Pogledajmo, dakle, osnovne načine usklađivanja blokova u CSS-u.

Horizontalno usklađivanje, ili Kako CSS postaviti blok u središte

Najlakši način da središte blokira vodoravno, odmah postoje nekoliko jednostavnih i elegantnih rješenja. Prvi način je da koristite svojstvo margine, koja je odgovorna za vanjsko uvlačenje i omogućava poravnavanje bloka u sredini. CSS ga čini vrlo elegantnim. To je važno ne brkati sa svojstvima podstavljanje tom obloge s obje strane jedinice mogu se postaviti „gura” iz graničnih sadržaja i stvaranja prostora između njih.

Drugi način je da koristite tekstno poravnanje: centar entiteta ako je blok naveden kao ponašanje linije ili linije (prikaz: inline ili display: inline-block).

Automatsko ispunjavanje desno i lijevo preko ruba: 0 auto

Značajka margine omogućuje učinkovito postavljanje bloka u središtu roditeljskog bloka u CSS-u, tj. Pogodna je za slučajeve kada svaki element dobiva prikaz: blok-svojstvo. Dovoljno je samo odrediti marginu: 0 autoparametar u CSS datoteci ili upotrijebiti atribut stila u HTML kodu. Dekriptiranje sadržaja ovog parametra:

• 0 - ne znači nikakva vanjska udubljenja na vrhu i dnu elementa;
• Automatski navodi vašem pregledniku da izračunava uvlake samostalno i slijeva, što određuje slobodan prostor na stranama i podijeli ga jednako na svakoj strani bloka.

Ako je sve ispravno, prilikom postavljanja margine: 0 auto-property u CSS, automatski će se pojaviti blok u sredini bloka. Možete postaviti razumno pitanje: "Zašto ne mogu postaviti marginu: auto auto, usklađivanje blok također vertikalno?" Nažalost, ova opcija ne funkcionira zbog takve značajke modela blokova, kao vertikalnog kolabiranja vanjskih uvlakača.

Što trebam učiniti ako je bloku dana ponašanje niza?

Kao što smo već rekli, jedna od ključnih značajki CSS-a je da svaki blok može dobiti jedno od nekoliko ponašanja. Gore smo razmotrili slučaj kada je element blok ne samo u izgledu, već i na položaju "u toku", odnosu s drugim elementima na stranici.

Sada ćemo uzeti u obzir slučaj kada se objekt daje liniju (prikaz: inline) ili ponašanje linije-blok (display: inline-block). I u prvom i drugom slučaju, on će percipirati svojstva koja upravljaju ponašanjem teksta na stranici. I poravnajte blok u središtu u CSS-u tekstualni poravnanje: centar parametara koji omogućuje rješavanje problema bez ikakvih komplikacija pomoći će nam. Jednostavno ga dodijelimo roditeljskoj jedinici, a naš element automatski postaje točno u sredini u vodoravnoj ravnini. Na njega će utjecati i druga slična svojstva, na primjer, vertikalno poravnati: srednja, dizajnirana da središte teksta okomito.

Elegantni CSS: upotrijebite položajni entitet: apsolutni

U CSS-u, poravnanje bloka u sredini je također moguće uz apsolutno pozicioniranje. Za elemenata trase nestandardni način najčešće koriste svojstva položaj: rođak, dopuštajući da ga pomaknuti u bilo kojem smjeru uz očuvanje izvorne prostor na stranici, a kroz mjesto: apsolutno, potpuno „pobjeći” element iz toka, a idealan je za biti smješten u CSS jedinici u sredini bloka u vertikalnoj ravnini.

Pretpostavimo da naš objekt ima visinu od 100px i širinu od 200px, standardni pravokutnik. Da biste ga svrstati u centar, mi ga da se povuče s lijeve i gornje 50% (lijevi: 50% i vrh: 50%), a nakon - negativne eksternalije margine s tim strankama na pola širine i visine bloka (margin-left: -100px i vrh: -50px). Objasnimo ovu točku detaljnije.

Svojstva lijevo i desno s vrijednosti od 50% "preuzmu" element u gornjem lijevom kutu i smjestite je u CSS blok u središtu roditeljskog bloka. Ali to nije sve. U ovom trenutku u CSS poravnanje okvira u sredini ne može biti pozvan točan, jer u sredini je sada samo gornji kut elementa. Da bi se postigla najbolje rezultate, trebamo premjestiti stavku natrag na polovinu širine i visine, pomoću odgovarajuće vertikalne udubljenja i složeniji imovinu pretvorba: prijevod (-50%, -50%), obavlja istu funkciju. Sada je jedinica idealno smještena. U zaključku, problem se može riješiti uz pomoć flexbox tehnologije, ali je namijenjen za napredne korisnike i ne radi u svim preglednicima.